@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist@5.2.8/latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist@5.2.8/latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist@5.2.8/latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist-mono@5.2.7/latin-400-normal.woff2") format("woff2");
}

:root {
    --bg: #080808;
    --bg-deep: #050505;
    --ink: #f1f1ef;
    --muted: rgba(241, 241, 239, 0.66);
    --faint: rgba(241, 241, 239, 0.4);
    --line: rgba(241, 241, 239, 0.14);
    --blue: #3d7cff;
    --magenta: #c84bff;
    --header: 4.25rem;
    --pad: clamp(1.15rem, 4vw, 4.25rem);
    --sans: "Geist", "Avenir Next", "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--bg); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { font-size: 0.55em; line-height: 0; }

::selection { background: var(--blue); color: #050505; }

:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 4px;
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 120;
    background: var(--ink);
    color: #080808;
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    text-decoration: none;
}
.skip:focus { top: 1rem; }

.display {
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.86;
    font-size: clamp(3.3rem, 10.5vw, 9.2rem);
    text-transform: uppercase;
}
.display .line { display: block; }
.display--m { font-size: clamp(2.2rem, 5.5vw, 4.8rem); }

.lede {
    max-width: 38rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.45;
    font-weight: 400;
}
.lede strong { color: var(--ink); font-weight: 500; }

.micro {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.text-link,
.explore,
.sound,
.menu-toggle {
    background: none;
    border: 0;
    padding: 0;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
}

.explore { display: inline-flex; gap: 0.55rem; align-items: center; }

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: var(--header);
    padding: 0.85rem var(--pad);
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.is-scrolled {
    background: rgba(8, 8, 8, 0.62);
    backdrop-filter: blur(12px);
}
.logo {
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.06em;
    text-decoration: none;
    justify-self: start;
}
.nav {
    justify-self: end;
    display: flex;
    gap: 1.35rem;
}
.nav a {
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}
.header-tools { display: flex; align-items: center; gap: 1.2rem; }
.sound { display: inline-flex; align-items: center; gap: 0.45rem; }
.sound__mark { color: var(--faint); }
.sound[aria-pressed="true"] .sound__mark { font-size: 0; }
.sound[aria-pressed="true"] .sound__mark::before {
    content: "●";
    font-size: 0.72rem;
    color: var(--ink);
}
.sound__wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 8px;
    opacity: 0;
}
.sound[aria-pressed="true"] .sound__wave { opacity: 0.8; }
.sound__wave i {
    display: block;
    width: 1px;
    height: 3px;
    background: currentColor;
    transform-origin: center bottom;
}
.sound[aria-pressed="true"] .sound__wave i:nth-child(2) { height: 6px; }
.sound[aria-pressed="true"] .sound__wave i:nth-child(3) { height: 4px; }
.sound[aria-pressed="true"] .sound__wave i:nth-child(4) { height: 7px; }
html.is-motion .sound[aria-pressed="true"] .sound__wave i {
    animation: idx-wave 1.6s ease-in-out infinite;
}
html.is-motion .sound[aria-pressed="true"] .sound__wave i:nth-child(2) { animation-delay: 0.15s; }
html.is-motion .sound[aria-pressed="true"] .sound__wave i:nth-child(3) { animation-delay: 0.28s; }
html.is-motion .sound[aria-pressed="true"] .sound__wave i:nth-child(4) { animation-delay: 0.08s; }
@keyframes idx-wave {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1); }
}
.menu-toggle { display: none; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: #050505;
    padding: calc(var(--header) + 6vh) var(--pad);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
    display: block;
    text-decoration: none;
    font-size: clamp(2.8rem, 14vw, 4.8rem);
    letter-spacing: -0.055em;
    line-height: 0.95;
    text-transform: uppercase;
}

.cursor { display: none; }
.transition {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: #050505;
    opacity: 0;
    pointer-events: none;
}

html.is-loading,
html.is-loading body { overflow: hidden; }

.preloader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.6rem;
}
html.skip-intro .preloader { display: none; }
.preloader__mark {
    display: flex;
    align-items: flex-end;
    gap: 0.02em;
    font-size: clamp(4.5rem, 16vw, 11rem);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.8;
}
.preloader__letter { opacity: 0; }
.preloader__xwrap {
    position: relative;
    display: inline-block;
    width: 0.72em;
    height: 0.78em;
    margin: 0 0.02em 0.02em;
}
.preloader__arm {
    position: absolute;
    left: 8%;
    top: 48%;
    width: 84%;
    height: 2px;
    background: rgba(241, 241, 239, 0.88);
    opacity: 0;
    transform-origin: center;
}
.preloader__xwrap.is-signed .preloader__arm--a {
    background: linear-gradient(90deg, #f1f1ef, var(--blue));
}
.preloader__xwrap.is-signed .preloader__arm--b {
    background: linear-gradient(90deg, var(--blue), var(--magenta));
}
.preloader__tag {
    margin: 0;
    opacity: 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--faint);
    transition: opacity 0.16s linear;
}
.preloader__official {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vw, 680px);
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.preloader.is-brand .preloader__mark,
.preloader.is-brand .preloader__tag { opacity: 0; }
.preloader.is-brand .preloader__official { opacity: 1; transition: opacity 0.12s linear; }
.preloader__mark { transition: opacity 0.12s linear; }

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    padding: calc(var(--header) + 8vh) var(--pad) 8vh;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    width: 46vw;
    height: 46vw;
    right: -8vw;
    top: 8vh;
    background: radial-gradient(circle, rgba(61, 124, 255, 0.09), transparent 68%);
    z-index: 0;
    animation: drift 16s ease-in-out infinite alternate;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.28;
    transform: scale(1.05);
}
.hero__media .cover,
.hero__media .ph { width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(8, 8, 8, 0.78), rgba(8, 8, 8, 0.18) 46%, rgba(8, 8, 8, 0.55)),
        radial-gradient(80% 70% at 20% 80%, rgba(8, 8, 8, 0.2), transparent);
    pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 100%; }
.hero__micro { margin-bottom: 1.25rem; }
.hero__title { font-size: clamp(4rem, 13.5vw, 12rem); }
.hero__copy { margin-top: 1.6rem; }
.hero .explore { margin-top: 2.4rem; }

@keyframes drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-4vw, 3vh, 0); }
}

.manifesto {
    background: var(--bg-deep);
    padding: 18vh var(--pad) 16vh;
}
.manifesto__words {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 16vh;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.92;
}
.manifesto__words li { opacity: 0.2; }
.manifesto__block {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.7fr);
    gap: 6vw;
    align-items: end;
}
.manifesto__copy { display: grid; gap: 0.85rem; color: var(--muted); }
.equation {
    margin-top: 16vh;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 1.1rem;
    font-size: clamp(1.15rem, 2.8vw, 2.3rem);
    letter-spacing: -0.045em;
}
.equation__op--x {
    background: linear-gradient(120deg, var(--blue), var(--magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.equation__result { font-size: 1.45em; letter-spacing: -0.06em; }

.work-intro { padding: 18vh var(--pad) 8vh; }
.work-intro .display { margin: 1rem 0 2rem; }
.work-intro__copy { display: grid; gap: 0.35rem; font-size: clamp(1.2rem, 2vw, 1.7rem); }

.work-piece {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #050505;
}
#work-casa-warner { min-height: 130svh; }
#work-cartoon-network-land { min-height: 100svh; }
#work-tabata-guns,
#work-bigstudios,
#work-adriana-caldeira { min-height: 88svh; }
#work-pimenta-cravo { min-height: 72svh; }
#work-equus-pro .work-piece__media {
    inset: 16vh 22vw 18vh 7vw;
    outline: 1px solid rgba(241, 241, 239, 0.2);
}
#work-casa-warner .work-piece__frame {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 50%);
}
#work-tabata-guns {
    background:
        linear-gradient(rgba(241, 241, 239, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 241, 239, 0.045) 1px, transparent 1px),
        #07080a;
    background-size: 72px 72px, 72px 72px, auto;
}
#work-tabata-guns .work-piece__title { max-width: 9ch; }
#work-bigstudios .work-piece__mid { margin-left: auto; text-align: right; }
#work-bigstudios .work-piece__title { margin-left: auto; }
#work-cartoon-network-land .work-piece__title { letter-spacing: -0.07em; }
#work-pimenta-cravo .work-piece__title {
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 4rem);
}
#work-adriana-caldeira .work-piece__frame { padding-right: 28vw; }
#work-tabata-guns .work-piece__frame,
#work-bigstudios .work-piece__frame,
#work-pimenta-cravo .work-piece__frame,
#work-adriana-caldeira .work-piece__frame { background: #050505; }
.work-piece__media { position: absolute; inset: 0; }
.work-piece__media .cover,
.work-piece__media .ph { width: 100%; height: 100%; object-fit: cover; }
.work-piece__media .ph {
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 6.5rem;
}
.work-piece__media .ph__title,
.work-piece__media .ph__meta { display: none; }
.work-piece__media .ph[data-theme="motion"]::after { content: none; }
.work-piece__frame {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: calc(var(--header) + 1.5rem) var(--pad) 2rem;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.18) 48%, rgba(5, 5, 5, 0.55) 100%);
}
.work-piece__top,
.work-piece__bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
}
.work-piece__title { font-size: clamp(3.1rem, 8.6vw, 7.6rem); max-width: 14ch; }
.work-piece__desc { margin-top: 1.4rem; max-width: 34rem; }
.work-piece[data-theme="whisper"] .work-piece__title {
    font-size: clamp(2.3rem, 5.5vw, 4.8rem);
    font-weight: 400;
    max-width: 12ch;
}
.work-piece[data-theme="editorial"] .work-piece__frame {
    background: linear-gradient(to top, rgba(12, 11, 10, 0.92), rgba(12, 11, 10, 0.28) 55%, rgba(12, 11, 10, 0.5));
}
.work-piece[data-theme="playful"] .work-piece__index { color: #f2c94c; }

.tags { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; }
.tags li {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    color: var(--faint);
}

.ph {
    position: relative;
    min-height: 100%;
    height: 100%;
    background-color: #0b0b0d;
    background-image:
        linear-gradient(rgba(241, 241, 239, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 241, 239, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1.4rem;
    overflow: hidden;
}
.ph__tag, .ph__meta {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--faint);
}
.ph__title {
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    letter-spacing: -0.045em;
    line-height: 0.9;
    max-width: 14ch;
}
.ph[data-theme="motion"]::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue), var(--magenta), transparent);
}
.ph[data-theme="system"] { background-size: 24px 24px; }
.ph[data-theme="cinematic"]::before,
.ph[data-theme="cinematic"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;