:root {
    color-scheme: dark;
    --bg: #101012;
    --fg: #f4f1ea;
    --muted: rgba(244, 241, 234, 0.7);
    --dim: rgba(244, 241, 234, 0.46);
    --line: rgba(244, 241, 234, 0.14);
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --drift-opacity: 1;
    --drift-speed: 1;
    --drift-extent: 1;
}
html[data-bg="drift"] {
    --drift-opacity: 0.3;
    --drift-speed: 3;
    --drift-extent: 3;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
    position: relative;
    min-height: 100dvh;
    min-height: 100lvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: Outfit, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.skip { position: absolute; left: var(--gutter); top: 0; transform: translateY(-120%); background: var(--fg); color: #111; padding: 0.4rem 0.7rem; z-index: 5; }
.skip:focus { transform: none; }
.bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
}
.follow {
    position: absolute;
    inset: 0;
    transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px), 0);
}
html[data-bg="drift"] .follow { transform: none; }
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0;
}
.fx {
    display: none;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16, 16, 18, 0.55), transparent 16% 82%, rgba(16, 16, 18, 0.72)),
        linear-gradient(90deg, rgba(16, 16, 18, 0.78) 0%, rgba(16, 16, 18, 0.28) 42%, transparent 68%);
}

html[data-bg="drift"] .blob.a {
    width: 46vw;
    height: 46vw;
    left: -12vw;
    top: 8vh;
    background: #1a6d68;
    opacity: calc(0.7 * var(--drift-opacity));
    animation: drift-a calc(34s / var(--drift-speed)) ease-in-out infinite alternate;
}
html[data-bg="drift"] .blob.b {
    width: 40vw;
    height: 40vw;
    right: 2vw;
    bottom: -10vh;
    background: #b08958;
    opacity: calc(0.34 * var(--drift-opacity));
    animation: drift-b calc(42s / var(--drift-speed)) ease-in-out infinite alternate;
}
html[data-bg="drift"] .blob.c {
    width: 28vw;
    height: 28vw;
    left: 28vw;
    top: 42vh;
    background: #8d6a45;
    opacity: calc(0.28 * var(--drift-opacity));
    animation: drift-c calc(28s / var(--drift-speed)) ease-in-out infinite alternate;
}

html[data-bg="field"] .blob.a,
html[data-bg="field"] .blob.b {
    opacity: 0.55;
    border-radius: 0;
    filter: blur(46px);
    width: 140%;
    height: 28vh;
    left: -20%;
    background: linear-gradient(90deg, transparent, rgba(90, 150, 168, 0.55), transparent);
}
html[data-bg="field"] .blob.a { top: 18vh; animation: field-rise 26s linear infinite; }
html[data-bg="field"] .blob.b {
    top: 62vh;
    background: linear-gradient(90deg, transparent, rgba(40, 78, 96, 0.7), transparent);
    animation: field-rise 34s linear infinite;
}
html[data-bg="field"] .blob.c {
    opacity: 0.4;
    width: 50vw;
    height: 50vw;
    right: -8vw;
    top: -10vh;
    background: #245e72;
    animation: drift-b 36s ease-in-out infinite alternate;
}

html[data-bg="pulse"] .blob.a {
    width: 48vw;
    height: 48vw;
    right: 2vw;
    top: 6vh;
    background: radial-gradient(circle, rgba(186, 214, 220, 0.85), rgba(36, 92, 108, 0.15) 62%, transparent 72%);
    opacity: 0.55;
    filter: blur(18px);
    animation: pulse 9s ease-in-out infinite;
}
html[data-bg="pulse"] .blob.b {
    width: 36vw;
    height: 36vw;
    left: -10vw;
    bottom: -6vh;
    background: #1a6d68;
    opacity: 0.45;
    animation: drift-a 30s ease-in-out infinite alternate;
}
html[data-bg="pulse"] .follow {
    transform: translate3d(calc(var(--px, 0) * 72px), calc(var(--py, 0) * 48px), 0);
}
html[data-bg="field"] .follow {
    transform: translate3d(calc(var(--px, 0) * 36px), 0, 0);
}
html[data-bg="poly"] .fx,
html[data-bg="orbit"] .fx,
html[data-bg="dust"] .fx,
html[data-bg="veil"] .fx,
html[data-bg="topo"] .fx {
    display: block;
    transform: translateZ(0);
}
html[data-bg="poly"] .bg,
html[data-bg="orbit"] .bg,
html[data-bg="dust"] .bg,
html[data-bg="veil"] .bg,
html[data-bg="topo"] .bg { background: transparent; }
html[data-bg="topo"] .follow { display: none; }
@media (max-width: 800px) {
    html[data-bg="topo"] .wash {
        background: linear-gradient(180deg, rgba(16, 16, 18, 0.2), transparent 10% 90%, rgba(16, 16, 18, 0.28));
    }
}
.shade {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: var(--topo-black, 0);
    pointer-events: none;
}
html[data-bg="topo"] .shade { display: block; }

@keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to {
        transform:
            translate3d(calc(8vw * var(--drift-extent)), calc(6vh * var(--drift-extent)), 0)
            scale(calc(1 + 0.12 * var(--drift-extent)));
    }
}
@keyframes drift-b {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-7vw * var(--drift-extent)), calc(-8vh * var(--drift-extent)), 0); }
}
@keyframes drift-c {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(6vw * var(--drift-extent)), calc(-5vh * var(--drift-extent)), 0); }
}
@keyframes field-rise {
    from { transform: translate3d(0, 18vh, 0); }
    to { transform: translate3d(0, -46vh, 0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.38; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .blob { animation: none; }
}

footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    padding: 1.2rem var(--gutter);
}
main {
    position: relative;
    flex: 1;
    display: grid;
    align-items: center;
    min-height: 0;
}
.copy {
    position: relative;
    z-index: 2;
    width: min(34rem, calc(100% - (var(--gutter) * 2)));
    margin: clamp(1.6rem, 5vh, 3rem) var(--gutter) 0;
    padding-bottom: 1.5rem;
}
.eyebrow {
    margin: 0 0 0.4rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--dim);
}
h1 {
    margin: 0;
    font-size: clamp(4.2rem, 12vw, 7.4rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.86;
}
.copy p:not(.eyebrow) {
    max-width: 32rem;
    margin: 1.3rem 0 0;
    color: var(--muted);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
}
.paypal {
    display: inline-flex;
    margin-top: 1.6rem;
    padding: 0.95rem 1.35rem;
    background: var(--fg);
    color: #141416;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.paypal:hover { background: #fff; }
.more { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1.15rem; }
.more a {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--fg);
    text-decoration: none;
    font-weight: 400;
}
.more svg { display: block; }
.portrait {
    position: relative;
    z-index: 2;
    display: block;
    width: min(62.4vw, 336px);
    height: auto;
    margin: 0 auto calc(min(62.4vw, 336px) * -6 / 707);
}
footer {
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.5);
    color: var(--dim);
    font-size: 0.92rem;
    font-weight: 300;
    padding-bottom: 1.2rem;
}
footer a { color: var(--fg); }
.studio {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    text-decoration: none;
}
.studio span { text-decoration: underline; text-underline-offset: 0.18em; }
.studio svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (min-width: 900px) {
    .portrait {
        position: absolute;
        right: 1vw;
        bottom: calc(min(90%, 800px) * -6 / 1080);
        width: auto;
        height: min(90%, 800px);
        margin: 0;
        transform: none;
        pointer-events: none;
    }
    .copy { margin-top: clamp(1.6rem, 5vh, 3rem); margin-bottom: 4vh; }
}