.tags span span {
                            color: var(--gray);
                        }

                        .logo-container {
                          align-items: flex-start;
                          gap: var(--base-unit);
                          scroll-behavior: auto;
                        }

                        .logo-container:hover .button {
                            background: var(--awhite);
                            color: var(--dark);
                            transition: 0s;
                        }

                        .cover {
                            background: #000000;
                            color: var(--awhite);
                            display: grid;
                            justify-content: center;
                            align-content: center;
                            height: 100svh;
                            width: 100vw;
                            padding: 2rem;
                            top: 0;
                            position: fixed;
                            align-content: start;
                            grid-template-rows: repeat(8, 1fr);
                        }

                        .bigwrap {
                            height: 100vh;
                            background: black;
                            top: 0;
                            position: fixed;
                            overflow: hidden;
                        }

                        #hero-info {
                            grid-column: 1/span 7;
                            grid-row: 2;
                            gap: var(--b24);
                            mix-blend-mode: difference;
                            z-index: 10;
                            opacity: 0;
                        }

                        .mute {
                            transition: opacity 0.3s ease-out;
                        }

                        #hero-text {
                              line-height: 1.275;
                              letter-spacing: -0.0123em;
                              text-indent: clamp(1rem, 2rem + 1vw, 2rem);
                              font-weight: 400;
                              font-size: clamp(1rem, 1rem + 1vw, 2rem);
                              text-wrap: pretty;
                              max-width: 23em;
                        }

                        #hero-text span:not(.mute) {
                            font-weight: 300;
                            color: var(--gray);
                        }

                        #hero-info .from {
                            color: var(--earth);
                            font-family: var(--ff-secondary);
                            font-variation-settings: "ROND" 100;
                            font-weight: 800;
                            font-size: var(--b16);
                        }

                        #hero-text:hover .mute{
                            opacity: 0.3;
                        }

                        .sub-info {
                            color: var(--earth);
                            font-family: var(--ff-secondary);
                            font-variation-settings: "ROND" 100;
                            font-weight: 800;
                            font-size: var(--b16);
                            position: relative;
                        }

                        #main,
                       .sub-info {
                            justify-content: space-between;
                        }

                        .sub-info a {
                            color: inherit
                        }

                        #main > .button {
                                align-self: center;
                                display: inline-flex;

                        }

                    .button {
                        height: 2.5rem;
                        background: var(--dark);
                        border-radius: var(--base-unit);
                        color: var(--earth);
                        padding: var(--b8) var(--b16);
                        text-decoration: none;
                        /*cursor: default;*/
                        border: none;
                        display: inline-block;
                        transition: all 0.3s ease-out;
                        user-select: none;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                    }

                    .button a {
                        color: var(--earth);
                    }

                    .button:hover {
                        background: #2B2B2B;
                        transition: background 0s ease-out;
                    }

                    .button:hover {
                        background: #2B2B2B;
                        transition: background 0s ease-out;
                    }

                    .button:visited,
                   .button a:visited {
                        color: var(--earth);
                    }

                    .button.awhite {
                        /*background: var(--awhite);
                        color: var(--gray);*/
                        backdrop-filter: blur(10px);
                        background: rgba(223, 223, 223, 0.4);
                        color: rgb(31, 31, 31);
                    }

                    .button.awhite:hover {
                        background: rgba(223, 223, 223, 1);
                    }

                    .button.awhite.active {
                        color: var(--dark);
                    }

                    .button.awhite a

                    .button.awhite:visited,
                   .button.awhite a:visited {
                       color: var(--dark);
                   }

                    /* .button.primary:hover {
                        color: var(--awhite);
                        background: var(--dark);
                    } */

                    .action-bar .button {
                        opacity: 1;
                        transition: opacity 0.3s;
                    }

                    .action-bar:hover .button {
                        opacity: 0.5;
                    }

                    .action-bar .button:hover {
                        opacity: 1;
                    }

                    .nav {
                        align-items: center;
                    }

                    #main .nav {
                        align-items: flex-start;
                    }

                    .slideNav {
                    position: sticky;
                        top: 0;
                        z-index: 10;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        transform: translateY(50px);
                        opacity: 0;
                    }

                    .slideNav .grow {
                    transform: scaleX(0);
                    transform-origin: left;
                    /* display: none; */
                    }


                        .sphere {
                            background-color: black;
                            width: 100vw;
                            height: 100vh;
                            position: relative;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            width: 34rem;
                            height: 34rem;
                            border-radius: calc(infinity * 1px);
                            cursor: grab;
                            display: grid;
                            /* outline: 1px solid black; */
                            font-size: 80%;
                            /* box-shadow moved to #heroWrapper::after (outside clip) so shadow not clipped */
                            /* fix: transform scaling breaks border-radius clipping (canvas goes square) */
                            clip-path: circle(50% at 50% 50%);
                            -webkit-clip-path: circle(50% at 50% 50%);
                            -webkit-mask-image: -webkit-radial-gradient(white, black);
                            mask-image: radial-gradient(white, black);
                            isolation: isolate;
                            transform: scale(1) translateZ(0);
                            transform-origin: center center;
                        }


                        /* — ORB BOUNCE (scale down to 0.95) — separate from speed burst — */
                        /* tweak: --sphere-bounce-scale (depth), --sphere-bounce-duration (bounce back), */
                        /* --sphere-bounce-down (press/hold down speed). overshoots derive via calc(). */
                        :root {
                            --sphere-bounce-scale: 0.90;
                            --sphere-bounce-duration: 1500ms;
                            --sphere-bounce-down: 340ms;
                        }
                        @keyframes sphereBurst {
                            0%   { transform: scale(1) translateZ(0); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.3); }
                            8%   { transform: scale(var(--sphere-bounce-scale)) translateZ(0); animation-timing-function: cubic-bezier(0.22, 1.32, 0.32, 1); }
                            22%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.4)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            42%  { transform: scale(calc(1 - (1 - var(--sphere-bounce-scale)) * 0.30)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            62%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.2)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            80%  { transform: scale(calc(1 - (1 - var(--sphere-bounce-scale)) * 0.1)) translateZ(0); animation-timing-function: cubic-bezier(0.22, 0.75, 0.35, 1); }
                            92%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.06)) translateZ(0); animation-timing-function: ease-out; }
                            100% { transform: scale(1) translateZ(0); }
                        }
                        /* hold → scales to --sphere-bounce-scale, release → bursts from that scale */
                        @keyframes sphereBurstRelease {
                            0%   { transform: scale(var(--sphere-bounce-scale)) translateZ(0); animation-timing-function: cubic-bezier(0.22, 1.32, 0.32, 1); }
                            16%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.4)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            38%  { transform: scale(calc(1 - (1 - var(--sphere-bounce-scale)) * 0.30)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            60%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.2)) translateZ(0); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1); }
                            78%  { transform: scale(calc(1 - (1 - var(--sphere-bounce-scale)) * 0.1)) translateZ(0); animation-timing-function: cubic-bezier(0.22, 0.75, 0.35, 1); }
                            90%  { transform: scale(calc(1 + (1 - var(--sphere-bounce-scale)) * 0.06)) translateZ(0); animation-timing-function: ease-out; }
                            100% { transform: scale(1) translateZ(0); }
                        }
                        .sphere.burst {
                            animation: sphereBurst var(--sphere-bounce-duration) both;
                            will-change: transform;
                            transform-origin: center center;
                        }
                        .sphere.holding {
                            transform: scale(var(--sphere-bounce-scale)) translateZ(0);
                            transition: transform var(--sphere-bounce-down) cubic-bezier(0.34, 1.45, 0.64, 1);
                        }
                        .sphere.burst-release {
                            animation: sphereBurstRelease var(--sphere-bounce-duration) both;
                            will-change: transform;
                            transform-origin: center center;
                        }

                        .sphere > * {
                            grid-area: 1/1;
                        }

                        #xxx {
                            /* box-shadow:
                            -4px -14px 4px -4px rgba(255, 166, 0, 0.7) inset,rgba(255, 255, 255, 0.7) 0px 0px 55px 0px inset,
                            10px -30px 125px -135px rgb(255, 255, 255) inset,
                            rgb(12, 31, 70) -40px -60px 145px 25px inset, */
                            box-shadow:
                            -0.25em -0.875em 0.25em -0.25em rgba(255, 166, 0, 0.7) inset,
                            rgba(255, 255, 255, 0.7) 0em 0em 3.4375em 0em inset,
                            0.625em -1.875em 7.8125em -8.4375em rgb(255, 255, 255) inset,
                            rgb(12, 31, 70) -2.5em -3.75em 9.0625em 1.5625em inset;
                            content: "";
                            display: block;
                            height: 100%;
                            position: absolute;
                            top: 0px;
                            width: 100%;
                            border-radius: calc(infinity * 1px);
                            overflow: hidden;
                            z-index: 1;
                            /* mix-blend-mode: hard-light; */
                            mix-blend-mode: overlay;
                            opacity: 1;
                            transition: filter 0.3s ease-in-out;
                        }

                        .sphere:hover #xxx {filter: brightness(2);}

                        #xyz {
                            /* box-shadow:
                                0 0 10px 1px rgba(255, 183, 0, 1) inset,
                                36px 78px 75px -39px rgb(215, 151, 70) inset,
                                -33px -54px 75px -33px rgba(255, 255, 255, 0.7) inset,
                                -24px -36px 84px 50px rgba(65, 32, 11, 1) inset; */
                                box-shadow:
                                0em 0em 0.625em 0.0625em rgba(255, 183, 0, 1) inset,
                                2.25em 4.875em 4.6875em -2.4375em rgb(215, 151, 70) inset,
                                -2.0625em -3.375em 4.6875em -2.0625em rgba(255, 255, 255, 0.7) inset,
                                -1.5em -2.25em 5.25em 3.125em rgba(65, 32, 11, 1) inset;
                            content: "";
                            display: block;
                            height: 100%;
                            position: absolute;
                            top: 0px;
                            width: 100%;
                            border-radius: calc(infinity * 1px);
                            z-index: 3;
                            /* mix-blend-mode: hard-light; */
                            mix-blend-mode: hard-light;
                            opacity: 1;
                            overflow: hidden;
                        }

                        #zyx {
                            /* box-shadow: 50px 50px 57px -35px rgba(255, 255, 255, 1) inset, -11px -13px 10px -13px rgba(255, 255, 255, 1) inset; */
                            box-shadow: 3.125em 3.125em 3.5625em -2.1875em rgba(255, 255, 255, 1) inset,
                                        -0.6875em -0.8125em 0.625em -0.8125em rgba(255, 255, 255, 1) inset;
                            content: "";
                            display: block;
                            height: 100%;
                            position: absolute;
                            top: 0px;
                            width: 100%;
                            border-radius: calc(infinity * 1px);
                            z-index: 4;
                            opacity: 1;
                            overflow: hidden;
                            mix-blend-mode: overlay;
                        }

                        .sphere #xyz {
                            cursor: grab;
                            /* was all 0.9s — width/height animated from 0→100% on load, looked like scale from top-left */
                            transition: opacity 0.9s ease-out, filter 0.9s ease-out, box-shadow 0.9s ease-out;
                        }





                        #log-output {
                            position: absolute;
                            right: 0px;
                            top: 0px;
                            font-family: "Doto", sans-serif;
                            font-weight: 500;
                        }

                        #log-output * {
                            font-weight: 400 !important;
                            text-transform: uppercase;
                        }


                        @keyframes flickerAwaken {
                            0% {
                                opacity: 0;
                            }
                            100% {
                                opacity: 1;
                            }
                        }





                        @keyframes hover {
                        0% {
                            transform: translate(0, 0px);
                        }
                        100% {
                            transform: translate(0, -80px);
                            }
                        }

                      .sphere * {
                            animation: flickerAwaken 1s ease-in forwards;
                            opacity: 0;
                            -webkit-transform:translateZ(0);
                            transform:translateZ(0);
                        }

                        #gradient-canvas {
                            width: 100%;
                            height: 100%;
                            transform: rotate(0deg) scale(1) translateY(0%);
                            opacity: 0;
                            --gradient-color-1: #f8911e;
                            --gradient-color-2: #d779cb;
                            --gradient-color-3: #7b26b0;
                            --gradient-color-4: #ac9fa6;
                       }

                       #gradient-canvas.isLoaded {
                            animation: flickerAwaken 1.5s ease-in 0.3s forwards;
                       }

                       #canvas-wrapper {
                           filter: saturate(1.3);
                       }


                        img, picture, video, canvas, svg  {
                            max-width: 100%;
                            height: auto;
                            font-style: italic;
                            background-repeat: no-repeat;
                            background-size: cover;
                            shape-margin: 0.75rem;
                              display: block;
                              max-width: 100%;
                        }

                         button {
                          font: inherit;
                        }

                        /* https://destroytoday.com/blog/checkered-pattern-for-loading-images-revisited */

                        .carousel {
                            overflow-x: auto;
                            white-space: nowrap;
                            -ms-overflow-style: none; /* IE/Edge hide bar */
                            scrollbar-width: none; /* Firefox hide bar */
                            width: 100%;
                            margin: 0 auto; /* center horizontally */
                            user-select: none; /* no text selection on clicks */
                            scroll-snap-type: none !important;
                            transition: filter 0.6s ease-in;
                        }

                        div.carousel-wrapper {
                            padding-bottom: 10rem;
                            scroll-margin-top: 4.5rem;
                            row-gap: calc(var(--container-gap) * 4)
                        }

                        .carousel::-webkit-scrollbar {
                            display: none; /* hide in WebKit */
                        }

                        .scrolling-wrapper {
                            gap: calc(var(--container-gap) + 1px);
                            display: flex;
                            padding: 0 var(--container-gap);
                            box-sizing: border-box;
                            will-change: transform;
                            transform-style: preserve-3d;
                            padding: 1px;
                            padding-left: var(--container-gap);
                            padding-right: var(--container-gap);
                        }
                        .carousel-item {
                            flex: 0 0 auto;
                            margin: 0;
                            height: min(35vw, 600px); /* min(35vw, 570px); */
                            background: #f7f7f5;
                            border-radius: var(--base-unit);
                            outline: 1px solid #EDEDED;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 1.2rem;
                            font-weight: bold;
                            user-select: none;
                            contain: paint;
                            transform: translateZ(0);
                            will-change: transform;
                            backface-visibility: hidden;
                            overflow: hidden;
                            aspect-ratio: 1;
                        }

                        .carousel-item {
                          /* clip-path: inset(0 0 100% 0); */
                          /* animation: reveal 1s forwards cubic-bezier(0.77, 0, 0.175, 1); */
                        }


                        @keyframes reveal {
                          to {
                            clip-path: inset(0 0 0 0);
                          }
                        }

                        .carousel-item video {
                            height: min(35vw, 600px);
                            width: auto;
                        }
                        .carousel-item img {
                            height: 100%;
                        }


                        video {
                            min-width: 100%;
                            height: auto;
                            backface-visibility: hidden;
                            transform: translateZ(0);
                        }
                        @keyframes fadeIn {
                            from {
                                opacity: 0;
                            }
                            to {
                                opacity: 1;
                            }
                        }
                        .cursor-left {
                            cursor: w-resize !important;
                        }
                        .cursor-right {
                            cursor: e-resize !important;
                        }

                        footer {
                            min-height: 20vh;
                            position: fixed;
                            gap: 0 !important;
                            width: 100vw;
                            bottom: 0;
                            margin-bottom: -100vh;
                            color: var(--awhite);
                            align-content: end;
                            counter-reset: x;
                            overflow-anchor: none;
                            box-shadow: 0px 150px 0 25px black; /* Fix for overscroll */
                        }

                        footer h4 {
                            font-family: var(--ff-secondary);
                            font-variation-settings: "ROND" 100;
                            font-size: 2rem;
                            font-weight: 100;
                            line-height: 1.25;
                        }

                        #contact .contactMe {
                            font-family: var(--ff-primary);
                            color: var(--gray);
                            font-variation-settings: "ROND" 100;
                            font-size: 1.5rem;
                            font-weight: 100;
                            line-height: 1.25;
                            text-indent: 0;
                        }

                        #contact .content {
                            flex-direction: column;
                            align-items: flex-start;
                        }


                        details summary {
                          counter-increment: x; /* Increment the counter for each summary */
                          position: relative;
                          list-style: none;
                        }

                        details summary::before {
                          content: counter(x, decimal-leading-zero) " "; /* Display the counter with leading zeros */
                          font-family: var(--ff-secondary);
                          font-variation-settings: "ROND" 100;
                          font-weight: 800;
                          color: var(--earth);
                        }

                        details summary::after {
                          content: "+";
                          position: absolute;
                            right: 0;
                            font-family: var(--ff-secondary);
                            font-variation-settings: "ROND" 100;
                            font-weight: 500;
                            color: var(--earth);
                        }

                        ::marker,
                        ::-webkit-details-marker {
                            content: "";
                            display: none;
                        }

                        details[open] summary::after {
                          content: "−";
                          position: absolute;
                            right: 0;
                        }


                        .details-wrapper {
                            border-top: 1px solid #262626;
                          background: #000000;
                        }

                        summary {
                            padding: 1rem 0;
                            cursor: pointer;
                        }

                        details {
                          overflow: clip;
                          overflow: hidden;
                        }

                        /* don't add margin/padding to this, add it to the actual
                           stuff inside the details content */
                        /* Safari 18.4+ smooth — needs interpolate-size + ::details-content */
                        @supports (interpolate-size: allow-keywords) {
                          :root { interpolate-size: allow-keywords; }
                          details::details-content { interpolate-size: allow-keywords; }
                        }
                        details::details-content {
                          interpolate-size: allow-keywords;
                          block-size: 0;
                          height: 0;
                          content-visibility: hidden;
                          opacity: 0;
                          overflow: hidden;
                          transition:
                            block-size 0.5s,
                            height 0.5s,
                            content-visibility 0.5s,
                            opacity 0.35s;
                          transition-behavior: allow-discrete;
                        }
                        details[open]::details-content {
                          block-size: auto;
                          height: auto;
                          content-visibility: visible;
                          opacity: 1;
                        }
                        /* Safari <18.4 fallback — same grid works without interpolate-size */
                        @supports not (interpolate-size: allow-keywords) {
                          details::details-content {
                            display: grid;
                            grid-template-rows: 0fr;
                            block-size: auto;
                            height: auto;
                          }
                          details[open]::details-content {
                            grid-template-rows: 1fr;
                          }
                        }
                        /* Safari <18.4 where ::details-content not supported at all — animate .content directly */
                        @supports not selector(details::details-content) {
                          details::details-content { display: contents; }
                          details .content {
                            display: grid;
                            grid-template-rows: 0fr;
                            opacity: 0;
                            overflow: hidden;
                            transition: grid-template-rows 0.5s ease, opacity 0.35s ease;
                          }
                          details[open] .content {
                            grid-template-rows: 1fr;
                            opacity: 1;
                          }
                          details .content > * {
                            overflow: hidden;
                            min-height: 0;
                          }
                        }
                        details::details-content > * {
                          min-height: 0;
                          overflow: hidden;
                        }

                        .copyMail {
                            display: grid;
                            align-content: center;
                        }

                        .success {
                            animation: blink-bg 0.6s ease-in-out forwards;
                        }

                        .success rect {
                            mix-blend-mode: difference;
                        }

                        .icon-success,
                        .icon-copy rect,
                        .icon-mail rect {
                            fill: var(--earth);
                        }

                        .icon-success,
                        .icon-copy,
                       .icon-mail {
                            grid-column: 1;
                                grid-row: 1;
                                transition: all 0.3s ease-in;
                                max-width: unset;
                                width: 16px;
                        }

                        .success .icon-success {
                            opacity: 1;
                        }

                        .icon-success,
                       .success .icon-copy {
                            opacity: 0;
                        }

                        @keyframes blink-bg {
                            0% { background-color: #var(--dark); }
                            30% { background-color: #F8F8F6; }
                            100% { background-color: #var(--dark); }
                        }

                        .social li {
                          transition: opacity 0.3s ease-out;
                        }

                        .social a {
                            display: inline-flex;
                            align-items: center;
                            gap: 0.5rem;
                            color: white;
                            display: inline-flex;
                        }

                        .social a img {
                            width: 1rem;
                        }

                        .social li:hover {
                          transition: opacity 0s ease-out;
                        }


                        details .text-content {
                            max-width: 40ch;
                        }

                        #contact .text-content {
                            gap: var(--container-gap);
                        }

                        details .content p {
                            text-indent: 1.5rem;
                        }

                        [open] {
                            margin-top: 1rem;
                        }

                        details .content {
                            /* closed — fade out (fixes flicker when old details closes while new opens) */
                            animation: blurIn 0.15s ease-out forwards;
                            opacity: 0;
                            padding: 1rem 0 3rem;
                            justify-content: space-between;
                            align-items: center;
                        }

                        details .secondary-content {
                            flex-grow: 1;
                        }

                        details[open] .content {
                            animation: blurOut 0.35s ease-out forwards;
                        }

                        li {
                            list-style: none;
                        }

                        ul {
                            padding: 0;
                        }

                          @keyframes tooltip-caret-slide {
                            50% {
                              opacity:0
                            }
                            to {
                              transform: translate(-50%, -0.25rem);
                              opacity:1
                            }
                          }

                        @keyframes tooltip-slide {
                          to {
                            transform: translate(-50%, -0.5rem);
                            opacity:1
                          }
                        }

                        #contact .social {
                            margin-top: 2.25rem;
                        }

                        .contactBar {
                            margin-top: 1rem;
                            align-items: center;
                        }

                        @keyframes blurIn {
                            /* closing — 1 → 0 */
                            0% {
                                /*filter: blur(0);*/
                                opacity: 1;
                            }
                            100% {
                                /*filter: blur(4px);*/
                                opacity: 0;
                            }
                        }

                        @keyframes blurOut {
                            /* opening — 0 → 1 */
                            0% {
                                /*filter: blur(5px);*/
                                opacity: 0;
                            }
                            100% {
                                /*filter: blur(0);*/
                                opacity: 1;
                            }
                        }
            /* :hover  */
            /* :hover  */
            /* :hover  */


                        :root {
            	--size-step: clamp(3.78875rem, 1.35rem + 11.84vw, 10.448125rem);
                        }

                        @property --captured-length {
            	syntax: "<length>";
            	initial-value: 0px;
            	inherits: true;
                        }

                        .text-fit {
            	--captured-length: initial;

            	display: flex;
            	container-type: inline-size;

            	/* Overrides a global style on headings */
            	max-width: unset;

            	> *:not([aria-hidden]) {
            		--captured-length: 100cqi;
            		--available-space: var(--captured-length);

            		flex-grow: 1;
            		container-type: inline-size;

            		> * {
            			--captured-length: 100cqi;
            			--ratio: tan(
            				atan2(
            					var(--available-space),
            					var(--available-space) - var(--captured-length)
            				)
            			);

            			display: block;

            			/* AKA, width */
            			inline-size: var(--available-space);

            			/* Apply the calculated size with sensible fallbacks for no support */
            			font-size: var(--size-step);

            			/* The initial fallback value for no support now becomes our minimum clamp value */
            			font-size: clamp(
            				var(--size-step),
            				0.99em * var(--ratio),
            				var(--max-font-size, infinity * 1px)
            			);
            		}
            	}
                        }

                        .text-fit [aria-hidden="true"] {
            	visibility: hidden;
                        }

                        .ego-size {
                            padding: 0 0.5rem 0 0;
                        }

                        .ego-size h2 {
                            color: white;
                            mix-blend-mode: exclusion;
                            font-weight: 200;
                            line-height: 1.1;
                            text-align: center;
                            user-select: none;
                            -moz-user-select: none;
                            -webkit-user-select: none;
                            pointer-events: none;
                        }

                        .bodyshape {
                            grid-column: 4/12;
                            grid-row: 4/10;
                            justify-self: center;
                        }

                        #heroWrapper {
                            grid-column: 5/11;
                            grid-row: 2/8;
                            justify-self: center;
                            z-index: 1;
                            animation: hover 5s ease-in-out infinite alternate;
                            /* shadow outside clip — filter follows circular alpha, not clipped by .sphere */
                            filter: drop-shadow(0px 60px 20px #000000ad);
                            -webkit-user-select: none;
                            -moz-user-select: none;
                            -ms-user-select: none;
                            user-select: none;
                            -webkit-touch-callout: none;
                            -webkit-tap-highlight-color: transparent;
                        }
                        #heroWrapper * {
                            -webkit-user-select: none;
                            -moz-user-select: none;
                            -ms-user-select: none;
                            user-select: none;
                            -webkit-touch-callout: none;
                        }
                        @media (max-width: 26.875rem) {
                            #heroWrapper { filter: drop-shadow(0px 32px 16px #000000ad); }
                        }

                        .bodyshape svg {
                            --gradient-color-1: #66455f;
                            --gradient-color-2: #1B0713;
                            --gradient-color-3: #2C223A;
                            --gradient-color-4: #C3A1A7;

                            width: 50rem;
                            z-index: 0;
                            margin-top: 13rem;
                            mask: linear-gradient(0deg, black 50%, black 90%, transparent 105%);
                            filter: saturate(0.3);
                        }


                        /* @Utility */
                        .grid {
                          display: grid;
                          grid-template-columns: 1fr repeat(12, minmax(0, 6.583rem)) 1fr;
                          gap: 1rem;
                        }

                        .subgrid {
                            display: grid;
                            grid-template-columns: subgrid;
                        }
                        .span-8 { grid-column: 4/span 8; }
                        .span-12 { grid-column: 2/span 12; }
                        .span-full { grid-column: 1/-1; }

                        .flex {
                          display: flex;
                          gap: var(--container-gap);
                        }

                        .center {
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        }

                        .grid.center {
                          display: grid;
                          place-items: center;
                        }
                        .flex-col { display: flex; flex-direction: column; gap: var(--container-gap);}

                        .block { display: block; }
                        .inline-block { display: inline-block; }
                        .hidden { display: none; }

                        .aspect-3-2 {
                            aspect-ratio: 3/2;
                        }

                        .lightbox {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 1);
                            backdrop-filter: blur(15px);
                            display: none;
                            justify-content: center;
                            align-items: center;
                            transition:
                                background 0.5s ease-out,
                                backdrop-filter 1s ease-out,
                                opacity 0.8s ease-out;
                            opacity: 1;
                            z-index: 100;
                        }
                        .lightbox video {
                            max-width: 90%;
                            max-height: 90%;
                            cursor: none;

                        }
                        .lightbox.fade-out {
                            backdrop-filter: blur(0px);
                            background: #090706;
                            opacity: 0;
                        }

                        .movie {
                            cursor:
                                url("cam.svg") 16 0,
                                auto;
                            place-self: center;
                            text-decoration: none;
                            font-weight: 400;
                        }

                        a.movie:visited {
                            color: inherit;
                        }

                        .email b,
                       #contact b {
                       	display: none;
                        }

                        .details-wrapper.grid.span-full summary:after {
                            transition: all 0.3s ease-out;
                            text-align:center;
                        }

                        .details-wrapper.grid.span-full summary:after {
                            transition: all 0.3s ease-out;
                            text-align:center;
                        }

                        #about[open] summary:after {

                          content: "";
                            animation: typingDeleting 10s steps(20) infinite;
                        }

                        #timeline[open] summary:after {
                          content: "";
                          animation: progressBar 8s infinite;
                        }

                        #contact[open] summary:after {
                          content: "";
                          animation: rotate-symbol 1s infinite;
                        }

                        #desdev[open] summary:after {
                        content: "";
                        animation: changingCharacters 10s infinite;
                        }


                        .hideOnMobile {
                            display: initial;
                        }

                        .hideOnDesktop {
                            display: none;
                        }

                        /* @ Media Queries */
                        @media (max-width: 90rem) {
                            #hero-text {
                                font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
                            }

                            .sphere {
                                width: 30rem;
                                height: 30rem;
                            }


                            @keyframes hover {
                            0% {
                                transform: translate(0, 80px);
                            }
                            100% {
                                transform: translate(0, 0px);
                                }
                            }

                            .bodyshape svg {
                                width: 40rem;
                                margin-top: 15rem;
                            }
                        }

                        @media (max-width: 60rem)  {
                            .hideOnDesktop {
                                display: initial;
                            }

                            .hideOnMobile {
                                display: none;
                            }

                            #hero-text {
                                font-size: clamp(1rem, 1rem + 2vw, 3rem);
                            }

                            .bodyshape {
                                grid-column: 1/15;
                                grid-row: 6/10;
                                }

                            .bodyshape svg  {
                                margin-top: 6rem;
                            }

                            #hero-info {
                            grid-column: 1/-1;
                            }

                            .grid {
                                grid-template-columns: 1fr repeat(12, 1fr) 1fr;
                            }

                            .span-8,
                            .span-12 {
                                grid-column: 2/14
                            }

                            .animated-text {
                            font-size: clamp(1rem, 1.1rem + 1vw, 3rem);
                            }


                            .slideNav {
                            display: none;
                            }

                            .name {
                            display: none;
                            }

                            .project-info {
                                flex-direction: column;
                            }

                            .project-info .tags {
                                flex-wrap: wrap;
                                gap: 0.5rem;
                            }

                            div.carousel-wrapper {
                                padding-bottom: 5rem;
                            }

                            .carousel-item video {
                                height: 100%;
                                max-width: 100vw;
                            }

                            .carousel-item img {
                                height: auto;
                            }

                            #heroWrapper {
                                grid-column: 4/12;
                                    grid-row: 3/8;
                            }
                        }

                        @media (max-width: 40rem) {
                            .sphere {
                                width: 25rem;
                                height: 25rem;
                            }

                            .section {
                                padding-top: 5rem;
                                padding-bottom: 5rem;
                                row-gap: 0;
                            }

                            .animated-text {
                                font-size: clamp(1rem, 1.7rem + 2vw, 3rem);
                            }
                        }

                        @media (max-width: 26.875rem)  {

                            body {
                                font-size: 0.875em;
                                overflow-x: hidden;
                            }

                            .cover {
                                padding: 1rem;
                            }

                            .popWrap {
                                width: 1.3em;
                                height: 1.3em;
                                }

                                .popWrap:hover .tagbar {
                                top: 5em;
                                }

                                @keyframes hov {
                                    0% {
                                        transform: translateY(-0.2em);
                                    }
                                    50% {
                                        transform: translateY(-0.4em); /* Complete rotation */
                                    }
                                    100% {
                                        transform: translateY(-0.2em); /* Complete rotation */
                                    }
                                  }

                            .sphere {
                                width: 18rem;
                                height: 18rem;
                                box-shadow: none;
                            }

                            @keyframes hover {
                            0% {
                                transform: translate(0, 0px);
                            }
                            100% {
                                transform: translate(0, -100px);
                                }
                            }

                            #heroWrapper {
                                grid-row: 4/8;
                                z-index: 10;
                                animation: hover 6s ease-in-out infinite alternate;
                            }

                            #hero-text {
                                font-size: clamp(0.875rem, 0.7rem + 1vw, 2rem);
                                line-height: 1.3;
                            }

                            .sub-info {
                                text-align: left;
                                flex-direction: column-reverse;
                                grid-row: 7/10;
                                justify-content: end;
                                font-size: 0.875em;
                                gap: 0;
                                z-index: 10;
                            }

                            .bodyshape svg {
                                margin-top: 0rem;
                                mask: linear-gradient(0deg, #00000000 50%, black 90%, transparent 105%);
                                margin-top: 5rem;
                            }

                            .carousel-item {
                                width: 100vw;
                                height: auto;
                            }

                            .carousel-item.aspect-3-2 img {
                                width: 100%;
                                    aspect-ratio: 3/2;
                                    height: auto;
                            }

                            .info {
                                font-size: 1rem;
                            }

                            .section {
                                padding-left: var(--b16);
                                padding-right: var(--b16);
                            }

                            summary {
                                font-size: 0.875em;
                                line-height: 1.3;
                            }

                            .secondary-content {
                                display: none;
                            }

                            #timeline {
                                padding-bottom: 0.4em;
                            }

                            footer h4 {
                                font-size: 1.5rem;
                            }

                            #contact .contactMe{
                                font-size: 1rem;
                            }

                            .contactBar {
                                justify-content: space-between;
                            }

                            #contact .social {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                justify-items: stretch;
                                width: 100%;
                            }

                            .social a {
                                width: 100%;
                                color: var(--earth);
                            }

                            .word:nth-of-type(1) { order: 1; }  /* "Building" */
                            .word:nth-of-type(2) { order: 2; }  /* "unique" */
                            .word:nth-of-type(3) { order: 3; }  /* "character" */
                            .popWrap.first { order: 2; } /* popWrap first */

                            .word:nth-of-type(4) { order: 5; }  /* "for" */
                            .word:nth-of-type(5) { order: 6; }  /* "sites" */
                            .popWrap.second { order: 5; } /* popWrap second */

                            .word:nth-of-type(6) { order: 8; }  /* "and" */
                            .word:nth-of-type(7) { order: 9; }  /* "brands." */
                            .word:nth-of-type(8) { order: 10; } /* "Obsession." */
                            .word:nth-of-type(9) { order: 11; } /* "Compact" */
                            .popWrap.third { order: 8; } /* popWrap third */

                            .word:nth-of-type(10) { order: 13; } /* "yet" */
                            .word:nth-of-type(11) { order: 14; } /* "flexible." */
                            .word:nth-of-type(12) { order: 15; } /* "Playful" */
                            .popWrap.fourth { order: 14; } /* popWrap fourth */

                            .word:nth-of-type(13) { order: 17; } /* "by" */
                            .word:nth-of-type(14) { order: 18; } /* "design." */
                            .word:nth-of-type(15) { order: 19; } /* "Explore" */
                            .popWrap.fifth { order: 23; } /* popWrap fifth */

                            .word:nth-of-type(16) { order: 21; } /* "my" */
                            .word:nth-of-type(17) { order: 22; } /* "work" */
                            .word:nth-of-type(18) { order: 23; } /* "or" */
                            .word:nth-of-type(19) { order: 24; } /* "say" */
                            .word:nth-of-type(20) { order: 25; } /* "hello." */

                        }

                        @media (max-width: 20rem) {

                            .logo-container {
                                display: none;
                            }
                        }

                        @media (min-width: 43rem) and (max-width: 53.94rem) and (orientation: landscape) {
                        .carousel-item {
                            height: 80vh;
                            max-width: 100vh;
                        }
                        }

                        @keyframes changingCharacters {
                          0%   { content: "A"; }
                          2%   { content: "B"; }
                          4%   { content: "C"; }
                          6%   { content: "D"; }
                          8%   { content: "E"; }
                          10%  { content: "F"; }
                          12%  { content: "G"; }
                          14%  { content: "H"; }
                          16%  { content: "I"; }
                          18%  { content: "J"; }
                          20%  { content: "K"; }
                          22%  { content: "L"; }
                          24%  { content: "M"; }
                          26%  { content: "N"; }
                          28%  { content: "O"; }
                          30%  { content: "P"; }
                          32%  { content: "Q"; }
                          34%  { content: "R"; }
                          36%  { content: "S"; }
                          38%  { content: "T"; }
                          40%  { content: "U"; }
                          42%  { content: "V"; }
                          44%  { content: "W"; }
                          46%  { content: "X"; }
                          48%  { content: "Y"; }
                          50%  { content: "Z"; }
                          52%  { content: "!"; }
                          54%  { content: "?"; }
                          56%  { content: "#"; }
                          58%  { content: "$"; }
                          60%  { content: "%"; }
                          62%  { content: "&"; }
                          64%  { content: "*"; }
                          66%  { content: "("; }
                          68%  { content: ")"; }
                          70%  { content: "{"; }
                          72%  { content: "}"; }
                          74%  { content: "["; }
                          76%  { content: "]"; }
                          78%  { content: "<"; }
                          80%  { content: ">"; }
                          82%  { content: "¶"; }
                          84%  { content: "+"; }
                          86%  { content: "÷"; }
                          88%  { content: "-"; }
                          90%  { content: "•"; }
                          92%  { content: "£"; }
                          94%  { content: "®"; }
                          96%  { content: "™"; }
                          98%  { content: "¥"; }
                          100% { content: "©"; }
                        }

                        @keyframes dots {
                          0%   { content: "◌"; }
                          25%  { content: "◔"; }
                          50%  { content: "◑"; }
                          75%  { content: "◕"; }
                          100% { content: "⏺"; }
                        }

                        @keyframes progressBar {
                          0%   { content: "|||||"; }
                          10%  { content: "-||||"; }
                          20%  { content: "--|||"; }
                          30%  { content: "---||"; }
                          40%  { content: "----|"; }
                          50%  { content: "-----"; }
                          60%  { content: "|----"; }
                          70%  { content: "||---"; }
                          80%  { content: "|||--"; }
                          90%  { content: "||||-"; }
                          100% { content: "|||||"; }
                        }



                        @keyframes rotate-symbol {
                          0% { content: "|"; }
                          25% { content: "/"; }
                          50% { content: "–"; }
                          75% { content: "\\"; }
                          100% { content: "|"; }
                        }


                        @keyframes typingDeleting {
                          0% { content: ""; }
                          5% { content: "█"; }
                          10% { content: ""; }
                          15% { content: "█"; }
                          20% { content: "H█"; }
                          25% { content: "He█"; }
                          30% { content: "Hel█"; }
                          35% { content: "Hell█"; }
                          40% { content: "Hello█"; }

                          45% { content: "Hola█"; }
                          50% { content: "Bonjour█"; }
                          55% { content: "Ciao█"; }
                          60% { content: "Hallo█"; }
                          65% { content: "Ola█"; }
                          70% { content: "Salut█"; }
                          75% { content: "Ahoj█"; }
                          80% { content: "Namaste█"; }
                          85% { content: "Shalom█"; }
                          90% { content: "Aloha█"; }

                          95% { content: "Hola█"; }
                          100% { content: "Hello█"; }

                          105% { content: "Hello█"; }
                          110% { content: "Hell█"; }
                          115% { content: "Hel█"; }
                          120% { content: "He█"; }
                          125% { content: "H█"; }
                          130% { content: "█"; }
                        }


                        .orb-static #gradient-canvas {
                            display: none;
                        }

                        .orb-static #canvas-wrapper {
                            filter: saturate(1.05);
                        }

                        @media (prefers-reduced-motion: reduce) {
                            html {
                                scroll-behavior: auto;
                            }

                            *,
                            *::before,
                            *::after {
                                animation-duration: 0.001ms !important;
                                animation-iteration-count: 1 !important;
                                scroll-behavior: auto !important;
                                transition-duration: 0.001ms !important;
                            }

                            #gradient-canvas {
                                display: none;
                            }

                            .word,
                            .pop,
                            #hero-info,
                            .sub-info,
                            #main .button,
                            .bodyshape svg {
                                opacity: 1 !important;
                                transform: none !important;
                            }

                            details .content {
                                animation: none !important;
                                filter: none !important;
                                opacity: 1 !important;
                            }
                        }


                        #collection, .carousel-wrapper {
                            content-visibility: auto;
                            contain-intrinsic-size: 800px 600px;
                        }

                        /* @ Style */