:root {
                --ink: #000;
                --paper: #fff;
                --sel: #0D99FF;
                --sel-deep: #0A6FC2;
                --fg: #F4F2FF;
                --lav: #BABAFB;
                --turmeric: #545388;
                --hibiscus: #7B3F6E;
                --monsoon: #3E5591;
                --backwater: #2B6468;
                --leaf: #4C6230;
                --kokum: #8A3D4E;
                --pad: clamp(16px,2.2vw,32px);
            }

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

            html,body {
                background: var(--ink);
                color: var(--fg)
            }

            /* phone notice: the site is built for a bigger screen */
            .notice {
                position: fixed;
                left: 12px;
                right: 12px;
                bottom: calc(14px + env(safe-area-inset-bottom));
                z-index: 95;
                max-width: 520px;
                margin: 0 auto;
                display: flex;
                gap: 12px;
                align-items: flex-start;
                padding: 14px 14px 14px 12px;
                border: 2.5px solid #000;
                border-radius: 18px;
                background: #fff;
                color: #000;
                box-shadow: 4px 4px 0 #000;
                transform: translateY(calc(100% + 40px));
                transition: transform .55s cubic-bezier(.2,.9,.2,1.1)
            }

            .notice[hidden] {
                display: none
            }

            .notice.show {
                transform: none
            }

            .notice-moon {
                width: 30px;
                height: 30px;
                flex: 0 0 auto;
                margin-top: 2px
            }

            .notice-title {
                font-family: "Melodrama",serif;
                font-size: 21px;
                line-height: 1.05;
                font-weight: 500
            }

            .notice-text {
                margin-top: 5px;
                font-size: 15px;
                line-height: 1.3;
                font-weight: 520;
                opacity: .8
            }

            .notice-actions {
                display: flex;
                gap: 8px;
                margin-top: 11px
            }

            .notice-actions button {
                height: 34px;
                padding: 0 14px;
                border: 2px solid #000;
                border-radius: 999px;
                font: inherit;
                font-size: 14px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .03em;
                color: #000
            }

            .notice-actions .solid {
                background: #000;
                color: #fff
            }

            @media (prefers-reduced-motion:reduce) {
                .notice {
                    transition: none
                }
            }

            /* case study viewer: opens over the site, the site stays where you left it */
            .cs {
                position: fixed;
                inset: 0;
                z-index: 100;
                display: flex;
                flex-direction: column;
                background: var(--paper);
                clip-path: inset(100% 0 0 0);
                visibility: hidden;
                transition: clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s
            }

            .cs.open {
                clip-path: inset(0 0 0 0);
                visibility: visible;
                transition: clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s
            }

            .cs-bar {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                height: 60px;
                padding: 0 20px;
                background: var(--ink);
                color: #fff
            }

            .cs-back {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                height: 38px;
                padding: 0 18px 0 14px;
                border: 2px solid rgba(255,255,255,.5);
                border-radius: 999px;
                color: #fff;
                font: inherit;
                font-size: 17px;
                font-weight: 620;
                letter-spacing: .02em;
                text-transform: uppercase;
                transition: background .2s,color .2s,border-color .2s
            }

            .cs-back:hover,.cs-back:focus-visible {
                background: #fff;
                color: var(--ink);
                border-color: #fff
            }

            .cs-back svg {
                width: 18px;
                height: 18px;
                transition: transform .25s cubic-bezier(.2,.8,.2,1)
            }

            .cs-back:hover svg {
                transform: translateX(-3px)
            }

            .cs-dl {
                flex: 0 0 auto;
                text-decoration: none
            }

            .cs-dl[hidden] {
                display: none
            }

            .cs-dl:hover svg {
                transform: translateY(2px)
            }

            .cs-bar .cs-title {
                flex: 1 1 auto;
                min-width: 0;
                text-align: right
            }

            .cs-title {
                font-size: 17px;
                font-weight: 620;
                letter-spacing: .02em;
                text-transform: uppercase;
                opacity: .7;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .cs-body {
                position: relative;
                flex: 1 1 auto;
                display: flex;
                background: var(--paper)
            }

            .cs iframe {
                flex: 1 1 auto;
                width: 100%;
                border: 0;
                background: transparent;
                opacity: 0;
                transition: opacity .35s
            }

            .cs-load {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                pointer-events: none;
                transition: opacity .3s
            }

            .cs-load i {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                border: 3px solid rgba(0,0,0,.12);
                border-top-color: #545388;
                animation: csspin .8s linear infinite
            }

            .cs.ready .cs-load {
                opacity: 0
            }

            @keyframes csspin {
                to {
                    transform: rotate(360deg)
                }
            }

            .cs iframe.ready {
                opacity: 1
            }

            @media (prefers-reduced-motion:reduce) {
                .cs-load i {
                    animation-duration: 2.4s
                }
            }

            html.cs-lock,html.cs-lock body {
                overflow: hidden
            }

            @media (prefers-reduced-motion:reduce) {
                .cs,.cs.open,.cs iframe {
                    transition: none
                }
            }

            body {
                font-family: "Big Shoulders",system-ui,sans-serif;
                font-weight: 500;
                letter-spacing: .012em;
                -webkit-font-smoothing: antialiased
            }

            .caps {
                text-transform: uppercase;
                letter-spacing: .01em
            }

            .amp,.hi-line {
                font-family: "Exposit Trial","Exposit","Big Shoulders",sans-serif
            }

            .amp .s {
                font-size: .74em
            }

            .amp .u {
                display: inline-block;
                transform: translateY(-.1em)
            }

            a,button {
                color: inherit;
                font: inherit;
                letter-spacing: inherit
            }

            button {
                background: none;
                border: 0;
                cursor: pointer
            }

            a:focus-visible,button:focus-visible {
                outline: 3px solid var(--sel);
                outline-offset: 4px;
                border-radius: 6px
            }

            /* the stage: a rounded canvas inside a black frame */
            .frame {
                position: fixed;
                inset: 0;
                padding: clamp(6px,0.9vw,12px);
                z-index: 1
            }

            .stage {
                --bg: #545388;
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: clamp(12px,1.6vw,22px);
                overflow: hidden;
                background: var(--bg)
            }

            .grain {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 80;
                overflow: hidden
            }

            .grain i {
                position: absolute;
                inset: 0;
                display: block
            }

            .grain .g1 {
                opacity: .22;
                mix-blend-mode: screen;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")
            }

            .grain .g2 {
                opacity: .3;
                mix-blend-mode: multiply;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.5'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")
            }

            .grain .g3 {
                inset: -60%;
                opacity: .16;
                mix-blend-mode: screen;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2 -0.8'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
                animation: film .7s steps(1) infinite
            }

            @keyframes film {
                0% {
                    transform: translate(0,0)
                }

                14% {
                    transform: translate(-7%,4%)
                }

                28% {
                    transform: translate(5%,-8%)
                }

                42% {
                    transform: translate(-11%,-3%)
                }

                57% {
                    transform: translate(9%,7%)
                }

                71% {
                    transform: translate(-4%,10%)
                }

                85% {
                    transform: translate(12%,-6%)
                }
            }

            .dust {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1
            }

            .scroll-space {
                height: 2850vh;
                position: relative;
                z-index: 0
            }

            /* header */
            .top {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--pad);
                z-index: 60;
                gap: 16px
            }

            .brand {
                display: flex;
                align-items: center;
                gap: 14px;
                font-weight: 800;
                font-size: 18px;
                letter-spacing: .03em;
                text-transform: uppercase
            }

            .status {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 12px 6px 10px;
                border: 1.5px solid rgba(244,242,255,.55);
                border-radius: 999px;
                font-size: 15px;
                text-transform: none;
                letter-spacing: .02em;
                font-weight: 550;
                background: rgba(255,255,255,.08)
            }

            .status i {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #7CE38B;
                box-shadow: 0 0 0 0 rgba(19,138,54,.6);
                animation: pulse 2.4s infinite
            }

            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(19,138,54,.55)
                }

                70% {
                    box-shadow: 0 0 0 9px rgba(19,138,54,0)
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(19,138,54,0)
                }
            }

            .nav {
                display: flex;
                gap: clamp(12px,2vw,28px);
                font-size: 18px;
                text-transform: uppercase;
                letter-spacing: .03em;
                font-weight: 600
            }

            .nav button {
                position: relative;
                padding: 4px 0;
                text-transform: inherit
            }

            .nav button::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 2px;
                background: var(--fg);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform .35s cubic-bezier(.2,.8,.2,1)
            }

            .nav button:hover::after {
                transform: scaleX(1)
            }

            /* sound toggle */
            .sound {
                display: inline-flex;
                align-items: center;
                gap: 9px;
                position: relative
            }

            .sound::after {
                display: none
            }

            .bars {
                display: flex;
                align-items: flex-end;
                gap: 2.5px;
                height: 15px
            }

            .bars i {
                display: block;
                width: 3px;
                height: 3px;
                border-radius: 2px;
                background: var(--fg);
                transition: height .35s ease
            }

            .sound.on .bars i {
                animation: eq .9s ease-in-out infinite
            }

            .sound.on .bars i:nth-child(2) {
                animation-delay: -.3s
            }

            .sound.on .bars i:nth-child(3) {
                animation-delay: -.55s
            }

            .sound.on .bars i:nth-child(4) {
                animation-delay: -.15s
            }

            @keyframes eq {
                0%,100% {
                    height: 4px
                }

                50% {
                    height: 15px
                }
            }

            .sound.invite .bars i {
                animation: tease 1.6s ease-in-out infinite
            }

            .sound.invite .bars i:nth-child(2) {
                animation-delay: -.5s
            }

            .sound.invite .bars i:nth-child(3) {
                animation-delay: -.9s
            }

            .sound.invite .bars i:nth-child(4) {
                animation-delay: -.25s
            }

            @keyframes tease {
                0%,100% {
                    height: 3px
                }

                50% {
                    height: 10px
                }
            }

            /* the nudge: a small bubble under the button until the music starts */
            .sound-hint {
                position: absolute;
                top: calc(100% + 12px);
                right: -6px;
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 8px 13px 8px 10px;
                border: 2px solid #000;
                border-radius: 12px;
                background: #fff;
                color: #000;
                font-size: 15px;
                font-weight: 700;
                letter-spacing: .02em;
                text-transform: none;
                white-space: nowrap;
                box-shadow: 3px 3px 0 #000;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-6px) scale(.92);
                transform-origin: 90% 0;
                transition: opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.4),visibility 0s .35s;
                pointer-events: auto;
                cursor: pointer
            }

            .sound-hint::before {
                content: "";
                position: absolute;
                top: -8px;
                right: 22px;
                width: 12px;
                height: 12px;
                background: #fff;
                border-left: 2px solid #000;
                border-top: 2px solid #000;
                transform: rotate(45deg)
            }

            .sound-hint svg {
                width: 18px;
                height: 18px;
                flex: 0 0 auto;
                animation: notebob 1.1s ease-in-out infinite alternate
            }

            .sound-hint .hint-tap {
                display: none
            }

            .sound.invite.nudge .sound-hint {
                opacity: 1;
                visibility: visible;
                transform: none;
                transition: opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.4),visibility 0s
            }

            .sound.invite.nudge .sound-hint {
                animation: hintfloat 2.4s ease-in-out .5s infinite
            }

            @keyframes notebob {
                from {
                    transform: translateY(1px) rotate(-8deg)
                }

                to {
                    transform: translateY(-2px) rotate(8deg)
                }
            }

            @keyframes hintfloat {
                0%,100% {
                    translate: 0 0
                }

                50% {
                    translate: 0 3px
                }
            }

            @media (pointer: coarse) {
                .sound-hint .hint-click {
                    display:none
                }

                .sound-hint .hint-tap {
                    display: inline
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .sound.on .bars i {
                    animation: none;
                    height: 11px
                }

                .sound.invite .bars i,.sound-hint,.sound-hint svg {
                    animation: none!important
                }
            }

            /* layers */
            .layer {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                visibility: hidden;
                opacity: 0;
                pointer-events: none;
                z-index: 2
            }

            .layer a,.layer button {
                pointer-events: auto
            }

            .layer.is-first {
                visibility: visible;
                opacity: 1
            }

            /* hero */
            #hero {
                z-index: 2
            }

            .hero-inner {
                position: absolute;
                inset: 0;
                will-change: transform
            }

            .hero-top {
                position: absolute;
                left: 0;
                right: 0;
                top: clamp(78px,11.5vh,120px);
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                z-index: 3
            }

            .kicker {
                font-family: "Exposit Trial","Exposit","Big Shoulders",sans-serif;
                color: var(--lav);
                font-size: clamp(17px,1.7vw,26px);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .04em;
                margin-bottom: clamp(2px,.6vh,8px)
            }

            .name-wrap {
                position: relative;
                display: inline-block
            }

            .name {
                display: block;
                font-family: "Mighty Ditey NF","MightyDiteyNF","Mighty Ditey","NameFallback",serif;
                font-weight: 400;
                text-transform: uppercase;
                color: #fff;
                font-size: min(15vw,26vh);
                line-height: .86;
                letter-spacing: 0;
                white-space: nowrap;
                padding: .04em .04em 0
            }

            .sel {
                position: absolute;
                left: -18px;
                top: -3px;
                width: 0;
                height: 0;
                border: 2px solid var(--sel);
                pointer-events: none;
                opacity: 0
            }

            .sel.done {
                right: -18px;
                bottom: -14px;
                width: auto;
                height: auto
            }

            .sel span {
                position: absolute;
                width: 11px;
                height: 11px;
                background: var(--paper);
                border: 2px solid var(--sel)
            }

            .sel span:nth-child(1) {
                left: -6px;
                top: -6px
            }

            .sel span:nth-child(2) {
                right: -6px;
                top: -6px
            }

            .sel span:nth-child(3) {
                left: -6px;
                bottom: -6px
            }

            .sel span:nth-child(4) {
                right: -6px;
                bottom: -6px
            }

            .dim {
                position: absolute;
                right: -18px;
                top: -30px;
                font-style: normal;
                background: var(--sel-deep);
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                padding: 3px 7px;
                border-radius: 4px;
                white-space: nowrap;
                opacity: 0
            }

            .phrase {
                --gap: calc(min(58vw,82vh) * .34);
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: clamp(12px,1.8vh,20px);
                font-family: "Mighty Ditey NF","MightyDiteyNF","Mighty Ditey","NameFallback",serif;
                text-transform: uppercase;
                color: var(--lav);
                opacity: .92;
                font-size: min(3.6vw,6.2vh);
                line-height: 1;
                letter-spacing: .02em
            }

            .phrase span {
                flex: 1 1 0;
                white-space: nowrap
            }

            .phrase span:first-child {
                text-align: right;
                padding-right: calc(var(--gap) / 2)
            }

            .phrase span:last-child {
                text-align: left;
                padding-left: calc(var(--gap) / 2)
            }

            .cursor {
                position: absolute;
                left: 0;
                top: 0;
                pointer-events: none;
                z-index: 6;
                will-change: transform
            }

            .cursor svg {
                display: block;
                width: 22px;
                height: 24px
            }

            .cursor b {
                position: absolute;
                left: 18px;
                top: 20px;
                background: var(--sel-deep);
                color: #fff;
                font-size: 12px;
                font-weight: 650;
                padding: 4px 8px;
                border-radius: 0 8px 8px 8px;
                white-space: nowrap
            }

            /* the character: shading follows the stage colour */
            .skin {
                fill: color-mix(in srgb,var(--bg) 82%,#fff)
            }

            .deep {
                fill: color-mix(in srgb,var(--bg) 35%,#000)
            }

            .thru {
                fill: color-mix(in srgb,var(--bg) 70%,#000)
            }

            .tint {
                fill: color-mix(in srgb,var(--bg) 75%,#fff)
            }

            .me {
                position: absolute;
                left: 50%;
                bottom: -6%;
                width: min(58vw,82vh);
                transform: translateX(-50%);
                z-index: 4
            }

            .me-svg {
                display: block;
                width: 100%;
                height: auto;
                overflow: visible
            }

            .dream {
                position: absolute;
                left: -26%;
                top: 40%;
                display: flex;
                align-items: center;
                gap: .55em;
                padding: .5em .95em .5em .65em;
                border: 2.5px solid #000;
                border-radius: 14px;
                background: #fff;
                color: #000;
                font-size: clamp(14px,1.25vw,21px);
                line-height: 1.05;
                transform: rotate(-7deg);
                box-shadow: 4px 4px 0 #000;
                visibility: hidden;
                opacity: 0;
                pointer-events: none;
                white-space: nowrap
            }

            .dream .moon {
                width: 1.9em;
                height: 1.9em;
                flex: 0 0 auto;
                animation: moonbob 3.2s ease-in-out infinite alternate
            }

            .dream small {
                display: block;
                font-size: .66em;
                font-weight: 620;
                text-transform: uppercase;
                letter-spacing: .06em;
                opacity: .65
            }

            .dream b {
                display: block;
                font-family: "Melodrama",serif;
                font-weight: 500;
                font-size: 1.28em;
                letter-spacing: -.005em
            }

            @keyframes moonbob {
                from {
                    transform: rotate(-12deg) translateY(-1px)
                }

                to {
                    transform: rotate(8deg) translateY(2px)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .dream .moon {
                    animation: none
                }
            }

            html.rm .dream {
                visibility: visible;
                opacity: 1
            }

            .shirt {
                position: absolute;
                left: 50%;
                top: 76%;
                width: 60%;
                transform: translateX(-50%);
                text-align: center;
                color: var(--lav)
            }

            .role {
                font-size: clamp(14px,2.2vh,21px);
                line-height: 1.3;
                font-weight: 600;
                max-width: 36ch;
                margin: 0 auto;
                text-wrap: balance
            }

            .role-title {
                display: block;
                white-space: nowrap
            }

            .hint-m {
                display: none;
                margin-top: 8px;
                font-size: 12px;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: .06em;
                font-weight: 650;
                color: var(--fg)
            }

            .hint-m span {
                display: inline-block;
                animation: hintbob 1.8s ease-in-out infinite
            }

            @keyframes hintbob {
                0%,100% {
                    transform: translateY(0)
                }

                50% {
                    transform: translateY(3px)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .hint-m span {
                    animation: none
                }
            }

            .contact {
                position: absolute;
                left: 0;
                right: 0;
                top: -6%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: clamp(6px,1.2vh,12px);
                visibility: hidden;
                opacity: 0
            }

            .contact h2 {
                color: #fff;
                font-size: clamp(26px,5vh,52px);
                line-height: .95;
                font-weight: 900;
                text-transform: uppercase
            }

            .links {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 4px 16px
            }

            .links a {
                text-decoration: none;
                font-size: clamp(14px,2.1vh,19px);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .03em;
                border-bottom: 1.5px solid transparent;
                transition: border-color .2s
            }

            .links a:hover {
                border-bottom-color: var(--lav)
            }

            .links a.primary {
                border-bottom-color: var(--lav)
            }

            .mail-wrap {
                display: inline-flex;
                align-items: center;
                gap: 6px
            }

            .copy {
                position: relative;
                display: inline-grid;
                place-items: center;
                width: 28px;
                height: 28px;
                border-radius: 8px;
                color: var(--lav);
                transition: background .2s,color .2s
            }

            .copy:hover,.copy:focus-visible {
                background: rgba(255,255,255,.14);
                color: #fff
            }

            .copy svg {
                grid-area: 1/1;
                width: 17px;
                height: 17px;
                transition: opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)
            }

            .copy .i-done {
                opacity: 0;
                transform: scale(.5)
            }

            .copy.done .i-copy {
                opacity: 0;
                transform: scale(.5)
            }

            .copy.done .i-done {
                opacity: 1;
                transform: none
            }

            .copy-tip {
                position: absolute;
                bottom: calc(100% + 6px);
                left: 50%;
                transform: translate(-50%,4px);
                padding: 3px 8px;
                border-radius: 6px;
                background: #fff;
                color: #000;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .02em;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                transition: opacity .2s,transform .2s
            }

            .copy.done .copy-tip {
                opacity: 1;
                transform: translate(-50%,0)
            }

            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap
            }

            .hint {
                position: absolute;
                left: var(--pad);
                bottom: calc(var(--pad) + 44px);
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                font-size: 16px;
                text-transform: uppercase;
                letter-spacing: .04em;
                font-weight: 600
            }

            .hint .line {
                width: 2px;
                height: 38px;
                background: rgba(255,255,255,.2);
                position: relative;
                overflow: hidden
            }

            .hint .line::after {
                content: "";
                position: absolute;
                left: 0;
                top: -40%;
                width: 100%;
                height: 40%;
                background: var(--fg);
                animation: drip 1.8s cubic-bezier(.6,0,.3,1) infinite
            }

            @keyframes drip {
                to {
                    top: 110%
                }
            }

            /* tunnel of nested frames */
            .tunnel {
                position: absolute;
                inset: 0;
                pointer-events: none;
                visibility: hidden;
                opacity: 0;
                will-change: transform
            }

            .tunnel div {
                position: absolute;
                border: 1.5px solid rgba(186,186,251,.55);
                background: rgba(0,0,0,.1)
            }

            /* hello */
            .hi-line {
                font-size: min(19vw,36vh);
                line-height: .9;
                font-weight: 900;
                text-transform: uppercase;
                white-space: nowrap;
                will-change: transform
            }

            .hi-line .wd {
                display: inline-block;
                white-space: nowrap
            }

            .hi-line .ch {
                display: inline-block;
                will-change: transform
            }

            .hi-line .ch.sm {
                font-size: .74em
            }

            .cap {
                position: absolute;
                left: 0;
                right: 0;
                margin: 0 auto;
                bottom: calc(var(--pad) + 64px);
                width: min(88vw,560px);
                text-align: center;
                font-size: clamp(18px,1.7vw,23px);
                line-height: 1.35;
                font-weight: 550
            }

            /* systems */
            .sys {
                position: relative;
                display: grid;
                place-items: center;
                width: 100%;
                height: 100%
            }

            .sys-small {
                position: absolute;
                top: 20%;
                font-size: clamp(26px,3vw,44px);
                font-weight: 900;
                text-transform: uppercase
            }

            .sys-word {
                --wg: 100;
                font-size: min(19vw,40vh);
                line-height: .85;
                font-weight: var(--wg);
                text-transform: uppercase;
                white-space: nowrap;
                will-change: transform
            }

            .kit {
                position: absolute;
                left: 50%;
                top: 56%;
                width: 0;
                height: 0
            }

            .sw {
                position: absolute;
                width: 46px;
                height: 46px;
                margin: -23px 0 0 -23px;
                border-radius: 50%;
                border: 2.5px solid var(--ink)
            }

            .card {
                position: absolute;
                left: -190px;
                top: -120px;
                width: 380px;
                height: 240px;
                background: var(--paper);
                border: 2.5px solid var(--ink);
                border-radius: 26px;
                opacity: 0
            }

            .card .bar {
                position: absolute;
                left: 24px;
                height: 12px;
                border-radius: 6px;
                background: var(--ink)
            }

            .card .bar.a {
                top: 28px;
                width: 52%
            }

            .card .bar.b {
                top: 52px;
                width: 34%;
                opacity: .35
            }

            .card .btn {
                position: absolute;
                left: 24px;
                bottom: 22px;
                padding: 10px 18px;
                border-radius: 14px;
                background: var(--ink);
                color: var(--paper);
                font-size: 14px;
                font-weight: 650
            }

            .card .tag {
                position: absolute;
                left: 0;
                top: -24px;
                font-size: 12px;
                color: var(--sel-deep);
                font-weight: 650
            }

            /* based */
            .based {
                position: relative;
                width: 100%;
                height: 100%;
                display: grid;
                place-items: center
            }

            .based-copy {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: -20vh
            }

            .based-text {
                text-align: center;
                font-size: min(15vw,30vh);
                line-height: .84;
                font-weight: 900;
                text-transform: uppercase
            }

            .based-copy .cap {
                position: static;
                transform: none;
                margin-top: clamp(20px,3.5vh,36px);
                width: min(88vw,640px);
                text-wrap: pretty
            }

            .based-text > span {
                display: block;
                white-space: nowrap
            }

            .auto {
                position: absolute;
                left: 0;
                bottom: calc(12% - 0.3%);
                width: clamp(170px,19vw,290px);
                will-change: transform
            }

            .auto svg {
                display: block;
                width: 100%;
                height: auto;
                overflow: visible;
                transform: scaleX(-1)
            }

            .road {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12%;
                height: 2px;
                background: var(--fg);
                opacity: .8;
                transform: translateY(1px)
            }

            /* work */
            .work {
                align-items: center;
                justify-items: start
            }

            .track {
                display: flex;
                align-items: center;
                gap: clamp(40px,6vw,110px);
                padding: 0 var(--pad) 0 calc(var(--pad) + 2vw);
                will-change: transform
            }

            .work-head {
                flex: 0 0 auto;
                width: min(80vw,440px)
            }

            .work-head h2 {
                font-size: clamp(64px,10vw,170px);
                line-height: .84;
                font-weight: 900;
                text-transform: uppercase
            }

            .work-head p {
                margin-top: 22px;
                font-size: clamp(18px,1.6vw,22px);
                line-height: 1.35;
                max-width: 30ch;
                font-weight: 480;
                text-wrap: pretty
            }

            .work-head .work-more {
                margin-top: 14px;
                opacity: .75
            }

            .work-more a {
                color: inherit;
                text-decoration: underline;
                text-decoration-thickness: 1.5px;
                text-underline-offset: 3px;
                transition: opacity .2s
            }

            .work-more a:hover,.work-more a:focus-visible {
                opacity: .7
            }

            .proj {
                flex: 0 0 auto;
                width: clamp(290px,40vw,640px);
                text-decoration: none;
                display: block
            }

            .proj .label {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                margin-bottom: 8px;
                font-weight: 620
            }

            .proj .label em {
                font-style: normal;
                opacity: .7
            }

            .proj .cover {
                position: relative;
                aspect-ratio: 4/3;
                max-height: 52vh;
                width: 100%;
                background: var(--paper);
                border: 2.5px solid var(--ink);
                border-radius: 18px;
                overflow: hidden;
                transition: transform .5s cubic-bezier(.2,.8,.2,1)
            }

            .proj .cover img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top center
            }

            .proj .cover::after {
                content: "";
                position: absolute;
                inset: -2px;
                border: 3px solid var(--sel);
                border-radius: 18px;
                opacity: 0;
                transition: opacity .2s
            }

            .proj:hover .cover,.proj:focus-visible .cover {
                transform: translateY(-6px) rotate(-.6deg)
            }

            .proj:hover .cover::after {
                opacity: 1
            }

            .proj h3 {
                margin-top: 14px;
                font-family: "Melodrama",serif;
                font-size: clamp(28px,2.8vw,42px);
                line-height: 1;
                font-weight: 500;
                letter-spacing: -.005em
            }

            .proj p {
                margin-top: 6px;
                font-size: 18px;
                line-height: 1.35;
                font-weight: 480;
                max-width: 44ch
            }

            .ph {
                position: absolute;
                inset: 0
            }

            .ph small {
                position: absolute;
                right: 12px;
                bottom: 10px;
                font-size: 11px;
                opacity: .55;
                font-weight: 600
            }

            /* about */
            .about-inner {
                width: min(90vw,1080px)
            }

            .about-inner .st {
                font-family: "Melodrama",serif;
                font-size: clamp(40px,6vw,100px);
                line-height: .95;
                font-weight: 500;
                letter-spacing: -.01em
            }

            .about-inner .st span {
                display: block;
                overflow: hidden
            }

            .about-inner .st span i {
                display: block;
                font-style: normal
            }

            .about-sub {
                margin-top: clamp(16px,2.6vh,28px);
                font-size: clamp(18px,1.6vw,23px);
                line-height: 1.4;
                font-weight: 500;
                max-width: 52ch;
                opacity: .9;
                text-wrap: pretty
            }

            .facts {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 24px;
                margin-top: clamp(28px,5vh,56px);
                padding-top: 20px;
                border-top: 1.5px solid var(--fg)
            }

            .facts dt {
                font-size: 15px;
                text-transform: uppercase;
                letter-spacing: .05em;
                opacity: .75;
                font-weight: 600
            }

            .facts dd {
                margin-top: 6px;
                font-size: clamp(19px,1.7vw,24px);
                line-height: 1.25;
                font-weight: 620
            }

            .tools {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 22px
            }

            .tools span {
                padding: 6px 12px;
                border-radius: 8px;
                background: rgba(255,255,255,.12);
                font-size: 17px;
                font-weight: 560
            }

            .more {
                display: flex;
                flex-wrap: wrap;
                gap: 12px 22px;
                margin-top: 26px;
                font-size: 19px;
                text-transform: uppercase;
                letter-spacing: .03em;
                font-weight: 680
            }

            .more a {
                text-decoration: underline;
                text-underline-offset: 5px;
                text-decoration-thickness: 2px
            }

            /* doodles scattered through the journey */
            .doodles {
                position: absolute;
                inset: 0;
                pointer-events: none
            }

            .doodles svg {
                position: absolute;
                overflow: visible
            }

            .spark path {
                fill: var(--fg)
            }

            .doodles {
                color: var(--fg)
            }

            .ph small {
                color: #000
            }

            .squig {
                left: 50%;
                top: 63%;
                width: min(36vw,480px);
                transform: translateX(-50%)
            }

            .sw::before,.sw::after {
                content: "";
                position: absolute;
                top: 11px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: radial-gradient(circle at 62% 38%,#000 0 3.2px,#fff 3.8px);
                border: 1.5px solid #000
            }

            .sw::before {
                left: 7px
            }

            .sw::after {
                right: 7px
            }

            .palm {
                bottom: 12%;
                will-change: transform
            }

            .hills {
                left: -4%;
                bottom: 12%;
                width: 108%;
                height: 20vh
            }

            .cup {
                bottom: 12%;
                will-change: transform
            }

            .peek {
                position: absolute;
                left: 4px;
                top: -78px;
                width: 130px;
                overflow: visible
            }

            .work-head h2 {
                position: relative
            }

            .birds {
                position: absolute;
                left: 9%;
                top: 45%;
                width: min(15vw,220px);
                overflow: visible;
                z-index: 2
            }

            .bird {
                fill: none;
                stroke: var(--fg);
                stroke-width: 4;
                stroke-linecap: round;
                stroke-linejoin: round
            }

            .plane {
                position: absolute;
                right: -14%;
                top: 7%;
                width: min(17vw,210px);
                overflow: visible
            }

            /* beliefs: the manifesto, one thought at a time */
            .bl-scene {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 0 7vw;
                visibility: hidden;
                opacity: 0
            }

            .bl-years {
                font-family: "Mighty Ditey NF","MightyDiteyNF","Mighty Ditey","NameFallback",serif;
                font-weight: 400;
                color: #fff;
                font-size: min(20vw,34vh);
                line-height: .9;
                text-transform: uppercase
            }

            .bl-under {
                width: min(40vw,420px);
                color: var(--lav);
                margin-top: 6px;
                overflow: visible
            }

            .bl-hands {
                margin-top: clamp(14px,2.4vh,26px);
                font-size: clamp(24px,3vw,46px);
                font-weight: 800;
                text-transform: uppercase;
                color: var(--lav);
                letter-spacing: .02em
            }

            .bl-b {
                align-items: center
            }

            .bl-inner {
                width: min(86vw,940px)
            }

            .bl-b h3 {
                font-family: "Melodrama",serif;
                font-weight: 500;
                color: #fff;
                font-size: clamp(38px,5.4vw,90px);
                line-height: .98;
                letter-spacing: -.01em
            }

            .bl-b h3 .w {
                display: inline-block;
                margin-right: .27em
            }

            .bl-b h3 .w:last-child {
                margin-right: 0
            }

            .bl-b p {
                margin-top: clamp(18px,3vh,32px);
                font-size: clamp(20px,2vw,30px);
                line-height: 1.35;
                font-weight: 500;
                color: var(--lav);
                max-width: 46ch;
                text-wrap: pretty
            }

            .bl-b .bl-kick {
                margin-top: clamp(18px,3vh,30px);
                font-size: clamp(24px,2.6vw,40px);
                font-weight: 800;
                text-transform: uppercase;
                color: #fff;
                letter-spacing: .02em
            }

            .bl-c {
                text-align: center;
                gap: clamp(14px,2.6vh,28px)
            }

            .bl-c .c1 {
                font-family: "Melodrama",serif;
                font-weight: 500;
                color: #fff;
                font-size: clamp(28px,3.4vw,56px);
                line-height: 1.05;
                max-width: 24ch
            }

            .bl-c .c2 {
                font-size: clamp(56px,9vw,160px);
                line-height: .9;
                font-weight: 900;
                text-transform: uppercase;
                color: #fff;
                white-space: nowrap
            }

            .vanilla {
                position: relative;
                display: inline-block
            }

            .strike {
                position: absolute;
                left: -4%;
                top: 38%;
                width: 108%;
                height: .34em;
                overflow: visible
            }

            .bl-c .c3 {
                font-size: clamp(20px,1.9vw,28px);
                line-height: 1.35;
                color: var(--lav);
                max-width: 48ch
            }

            .bl-d {
                text-align: center
            }

            .bl-d h2 {
                font-family: "Melodrama",serif;
                font-weight: 500;
                color: #fff;
                font-size: clamp(46px,7vw,124px);
                line-height: .95;
                letter-spacing: -.01em
            }

            .bl-d p {
                margin-top: clamp(18px,3vh,30px);
                font-size: clamp(20px,2vw,30px);
                color: var(--lav);
                max-width: 36ch;
                line-height: 1.3
            }

            .nowrap {
                white-space: nowrap
            }

            .coffee {
                display: inline-block;
                width: 1.7em;
                height: 1.85em;
                margin-left: .3em;
                vertical-align: -.42em;
                overflow: visible
            }

            .coffee .wisps path {
                transform-box: fill-box;
                transform-origin: 50% 100%;
                opacity: 0;
                animation: wisp 2.6s ease-in-out infinite
            }

            .coffee .wisps path:nth-child(2) {
                animation-delay: .85s
            }

            .coffee .wisps path:nth-child(3) {
                animation-delay: 1.7s
            }

            @keyframes wisp {
                0% {
                    opacity: 0;
                    transform: translateY(5px) scaleY(.7)
                }

                35% {
                    opacity: .9
                }

                70% {
                    opacity: .5
                }

                100% {
                    opacity: 0;
                    transform: translateY(-7px) scaleY(1.1) translateX(1.5px)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .coffee .wisps path {
                    animation: none;
                    opacity: .7;
                    transform: none
                }
            }

            .bl-doodles {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0
            }

            .bl-d > h2,.bl-d > p {
                position: relative;
                z-index: 1
            }

            .dd {
                position: absolute;
                left: var(--x);
                top: var(--y);
                width: clamp(28px,var(--w),220px);
                transform: translate(-50%,-50%)
            }

            .dd .ddp {
                display: block
            }

            .dd .ddf {
                display: block;
                animation: ddfloat var(--t) ease-in-out var(--dl) infinite alternate
            }

            .dd svg {
                display: block;
                width: 100%;
                height: auto;
                overflow: visible
            }

            .dd-s1 svg,.dd-s2 svg,.dd-s3 svg {
                animation: ddtwinkle 2.4s ease-in-out var(--dl) infinite alternate
            }

            .dd-talk .dots circle {
                animation: ddtype 1.2s ease-in-out infinite
            }

            .dd-talk .dots circle:nth-child(2) {
                animation-delay: .2s
            }

            .dd-talk .dots circle:nth-child(3) {
                animation-delay: .4s
            }

            .dd-flag .cloth {
                transform-box: fill-box;
                transform-origin: 0 50%;
                animation: ddwave 1.6s ease-in-out infinite alternate
            }

            @keyframes ddfloat {
                from {
                    transform: translateY(-6px) rotate(-3deg)
                }

                to {
                    transform: translateY(6px) rotate(3deg)
                }
            }

            @keyframes ddtwinkle {
                from {
                    opacity: .35;
                    transform: scale(.7)
                }

                to {
                    opacity: 1;
                    transform: scale(1.1)
                }
            }

            @keyframes ddtype {
                0%,60%,100% {
                    opacity: .25
                }

                30% {
                    opacity: 1
                }
            }

            @keyframes ddwave {
                from {
                    transform: skewY(-4deg) scaleX(.94)
                }

                to {
                    transform: skewY(5deg) scaleX(1.04)
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .dd .ddf,.dd svg,.dd-talk .dots circle,.dd-flag .cloth {
                    animation: none
                }
            }

            .bl-d .bl-open {
                margin-top: clamp(22px,4vh,44px);
                font-size: clamp(17px,1.5vw,22px);
                color: #fff;
                opacity: .85;
                max-width: 44ch;
                margin-left: auto;
                margin-right: auto;
                text-wrap: balance
            }

            html.rm .bl-scene {
                position: relative;
                inset: auto;
                visibility: visible;
                opacity: 1;
                min-height: 80vh
            }

            html.rm .layer[data-bg="deep"] {
                --bg: #2A2650;
                background: var(--bg)
            }

            /* ruler: shows where you are in the journey */
            .ruler {
                position: absolute;
                left: var(--pad);
                right: var(--pad);
                bottom: calc(var(--pad) * .7);
                height: 30px;
                z-index: 1
            }

            .ruler .ticks {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 7px;
                background: repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1.5px,transparent 1.5px 1%)
            }

            .ruler .head {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 2px;
                height: 16px;
                background: var(--lav)
            }

            .ruler button {
                position: absolute;
                bottom: 12px;
                transform: translateX(-50%);
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: .04em;
                font-weight: 620;
                opacity: .75;
                white-space: nowrap
            }

            .ruler button:hover {
                opacity: 1
            }

            /* tablets held upright: a bigger character standing on the bottom edge, so the shirt and contact links stay on screen */
            @media (min-width: 721px) and (orientation:portrait) {
                .me {
                    width:min(84vw,62vh);
                    bottom: 0
                }

                .name {
                    font-size: min(20vw,13vh)
                }

                .phrase {
                    --gap: calc(min(84vw,62vh) * .34)
                }

                .dream {
                    font-size: clamp(15px,2.2vw,22px);
                    left: 1%;
                    top: 15%
                }
            }

            /* short landscape screens (tablets, small laptops): lift the character a touch so the links clear the edge */
            @media (min-width: 721px) and (orientation:landscape) and (max-height:860px),(min-width:721px) and (orientation:landscape) and (max-aspect-ratio:3/2) {
                .me {
                    bottom:-2.5%
                }
            }

            @media (max-width: 720px) {
                .brand .who {
                    display:none
                }

                .name {
                    font-size: min(29vw,19vh)
                }

                .nav {
                    font-size: 16px
                }

                .sound-label {
                    display: none
                }

                .me {
                    width: 108%;
                    bottom: 0
                }

                .hint {
                    display: none
                }

                .hint-m {
                    display: block
                }

                .role {
                    font-size: 12px
                }

                .shirt {
                    width: 70%;
                    top: 76%
                }

                .palm.far {
                    display: none
                }

                .birds {
                    top: 47%;
                    left: 58%;
                    width: 28vw
                }

                .phrase {
                    --gap: .3em;
                    font-size: 6.4vw;
                    margin-top: 24px
                }

                .bl-c .c2 {
                    white-space: normal;
                    font-size: 15vw;
                    line-height: .95
                }

                .bl-b h3 {
                    font-size: 9.6vw
                }

                .plane {
                    display: none
                }

                .name span {
                    display: block
                }

                .nav {
                    font-size: 14px;
                    gap: 14px
                }

                .ruler button {
                    display: none
                }

                .facts {
                    grid-template-columns: 1fr;
                    gap: 10px;
                    margin-top: 18px;
                    padding-top: 14px
                }

                .contact {
                    top: -34px;
                    gap: 6px
                }

                .dream {
                    left: 6%;
                    top: -9%
                }

                .dd {
                    left: var(--mx);
                    top: var(--my);
                    width: var(--mw)
                }

                .dd-hide-m {
                    display: none
                }

                .links {
                    gap: 2px 14px
                }

                .facts dd {
                    font-size: 17px
                }

                .about-inner .st {
                    font-size: 8.4vw
                }

                .about-sub {
                    font-size: 15px;
                    margin-top: 12px
                }

                .tools {
                    gap: 6px;
                    margin-top: 14px
                }

                .tools span {
                    font-size: 13px;
                    padding: 4px 9px
                }

                .more {
                    font-size: 15px;
                    margin-top: 16px
                }

                .kit {
                    transform: scale(.78)
                }

                .based-copy {
                    margin-top: -20vh
                }

                .status {
                    font-size: 12px
                }
            }

            /* reduced motion: the journey becomes a calm, stacked page */
            html.rm .frame {
                position: relative;
                padding: 0
            }

            html.rm .stage {
                border-radius: 0;
                height: auto;
                overflow: visible;
                background: none
            }

            html.rm .scroll-space,html.rm .tunnel,html.rm .ruler,html.rm .cursor,html.rm .hint,html.rm .grain,html.rm .dust {
                display: none
            }

            html.rm .top {
                position: sticky;
                background: var(--turmeric)
            }

            html.rm .layer {
                position: relative;
                inset: auto;
                visibility: visible;
                opacity: 1;
                min-height: 100vh;
                padding: 120px var(--pad) 80px
            }

            html.rm .layer[data-bg="hibiscus"] {
                --bg: var(--hibiscus);
                background: var(--bg)
            }

            html.rm .layer[data-bg="monsoon"] {
                --bg: var(--monsoon);
                background: var(--bg)
            }

            html.rm .layer[data-bg="backwater"] {
                --bg: var(--backwater);
                background: var(--bg)
            }

            html.rm .layer[data-bg="leaf"] {
                --bg: var(--leaf);
                background: var(--bg)
            }

            html.rm .layer[data-bg="kokum"] {
                --bg: var(--kokum);
                background: var(--bg)
            }

            html.rm .layer[data-bg="turmeric"] {
                --bg: var(--turmeric);
                background: var(--bg)
            }

            html.rm .sel {
                right: -18px;
                bottom: -14px;
                width: auto;
                height: auto;
                opacity: 1
            }

            html.rm .dim {
                display: none
            }

            html.rm .contact {
                visibility: visible;
                opacity: 1
            }

            html.rm .role,html.rm .hint-m {
                display: none
            }

            html.rm #hero {
                min-height: 100vh
            }

            html.rm .doodles,html.rm .peek,html.rm .plane {
                display: none
            }

            html.rm .cap {
                position: relative;
                left: auto;
                bottom: auto;
                transform: none;
                margin: 32px auto 0
            }

            html.rm .kit,html.rm .auto,html.rm .road {
                display: none
            }

            html.rm .sys-word {
                --wg: 900
            }

            html.rm .track {
                flex-wrap: wrap;
                padding: 0
            }

            html.rm .work-head {
                width: 100%
            }

            html.rm .sys-small {
                position: relative;
                top: auto
            }

            html.rm .sys {
                display: flex;
                flex-direction: column;
                justify-content: center
            }