:root {
    --bg:#05070c;
    --panel:#0b1019;
    --text:#f4f7fb;
    --muted:#98a5b8;
    --line:rgba(255,255,255,.09);
    --a:#65e7ff;
    --b:#8b72ff;
}

* {
    box-sizing:border-box;
}

html {
    color-scheme:dark;
    scroll-behavior:smooth;
}

body.psp-public-home {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow-x:hidden;
}

a {
    color:inherit;
}


/* NAV */

.pub-nav {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height:76px;

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

    padding:
        0
        clamp(
            20px,
            5vw,
            70px
        );
}

.pub-brand {
    font-weight:900;
    letter-spacing:.12em;
}

.pub-nav a {
    text-decoration:none;
}

.journal-link {
    font-size:13px;
    color:#cbd5e1;

    border:
        1px solid
        var(--line);

    border-radius:999px;

    padding:
        9px 14px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );
}


/* FIELD */

.field {
    position:relative;

    height:
        max(
            720px,
            100svh
        );

    min-height:620px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 42%,
            rgba(101,231,255,.09),
            transparent 24%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(139,114,255,.08),
            transparent 26%
        ),

        #05070c;
}

#fieldCanvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    touch-action:none;
}

.hero-copy {
    position:absolute;
    z-index:3;

    left:50%;
    top:50%;

    width:
        min(
            880px,
            calc(100% - 40px)
        );

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

    text-align:center;

    pointer-events:none;
}

.kicker {
    margin:
        0 0 18px;

    color:
        var(--a);

    font-size:11px;
    font-weight:900;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.hero-copy h1 {
    margin:0;

    font-size:
        clamp(
            58px,
            11vw,
            142px
        );

    line-height:.82;

    letter-spacing:-.075em;
}

.hero-copy h1 span {
    color:transparent;

    background:
        linear-gradient(
            120deg,
            #fff 20%,
            var(--a) 55%,
            #9e8cff
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.hero-copy p {
    max-width:610px;

    margin:
        28px auto 0;

    color:#aeb9c8;

    font-size:
        clamp(
            16px,
            2vw,
            20px
        );

    line-height:1.65;
}


/* MODE BAR */

.modebar {
    position:absolute;
    z-index:5;

    bottom:30px;
    left:50%;

    display:flex;

    gap:5px;

    transform:
        translateX(-50%);

    padding:5px;

    border:
        1px solid
        var(--line);

    border-radius:999px;

    background:
        rgba(
            7,
            10,
            16,
            .62
        );

    backdrop-filter:
        blur(14px);
}

.modebar button {
    border:0;

    border-radius:999px;

    padding:
        9px 13px;

    color:#8f9caf;

    background:transparent;

    font:inherit;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

    cursor:pointer;
}

.modebar button.active {
    color:#071018;

    background:
        var(--a);
}

.scrollhint {
    position:absolute;
    z-index:5;

    right:
        clamp(
            20px,
            5vw,
            70px
        );

    bottom:36px;

    color:#7d8999;

    font-size:11px;

    letter-spacing:.14em;

    text-transform:uppercase;
}


/* POSTS */

.public-content {
    position:relative;
    z-index:2;

    border-top:
        1px solid
        var(--line);

    background:
        linear-gradient(
            #070a10,
            #05070c
        );

    padding:
        110px 0 130px;
}

.wrap {
    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin:auto;
}

.sec-head {
    display:flex;

    justify-content:
        space-between;

    gap:30px;

    align-items:end;

    margin-bottom:40px;
}

.sec-head h2 {
    margin:0;

    font-size:
        clamp(
            38px,
            6vw,
            72px
        );

    letter-spacing:-.055em;

    line-height:.95;
}

.sec-head p {
    max-width:460px;

    margin:0;

    color:
        var(--muted);

    line-height:1.65;
}

.post-grid {
    display:grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:16px;
}

.post-card {
    min-height:300px;

    display:flex;

    flex-direction:column;

    padding:26px;

    border:
        1px solid
        var(--line);

    border-radius:24px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    transition:
        .25s ease;
}

.post-card:hover {
    transform:
        translateY(
            -7px
        );

    border-color:
        rgba(
            101,
            231,
            255,
            .38
        );
}

.post-card small {
    color:
        var(--a);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.1em;
}

.post-card h3 {
    margin:
        18px 0 12px;

    font-size:25px;

    line-height:1.12;

    letter-spacing:-.035em;
}

.post-card p {
    margin:0;

    color:
        var(--muted);

    line-height:1.6;
}

.post-card .read {
    margin-top:auto;

    padding-top:28px;

    color:#dfe8f2;

    font-weight:800;
}

.pub-footer {
    padding:28px;

    border-top:
        1px solid
        var(--line);

    color:#768295;

    text-align:center;

    font-size:12px;
}


@media(max-width:820px) {

    .post-grid {
        grid-template-columns:
            1fr;
    }

    .sec-head {
        display:block;
    }

    .sec-head p {
        margin-top:20px;
    }

    .scrollhint {
        display:none;
    }
}


@media(prefers-reduced-motion:reduce) {

    html {
        scroll-behavior:auto;
    }

    .modebar {
        display:none;
    }
}

.psp-public-private-note{
	margin-top:18px;
	padding:34px;
	border:1px solid var(--line);
	border-radius:24px;
	background:linear-gradient(120deg,rgba(101,231,255,.04),rgba(139,114,255,.035));
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);
	gap:28px;
	align-items:center;
}
.psp-public-private-note .kicker{margin-bottom:10px}
.psp-public-private-note h3{
	margin:0;
	font-size:clamp(28px,4vw,46px);
	letter-spacing:-.045em;
}
.psp-public-private-note>p{
	margin:0;
	color:var(--muted);
	line-height:1.7;
}
@media(max-width:820px){
	.psp-public-private-note{grid-template-columns:1fr}
}
