:root{
    --void:#010204;
    --black:#040509;
    --ink:#080A13;
    --navy:#171A2D;
    --violet:#313453;
    --silver:#AFADB3;
    --white:#F4F2F5;

    --ah-bg:#DDF3B8;
    --ah-soft:#C9E99B;
    --ah-dark:#08111F;

    --labs-bg:#171A2D;
    --labs-soft:#313453;
    --labs-dark:#F4F2F5;
}

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    color:var(--silver);

    background:
        radial-gradient(circle at 18% 12%, rgba(49,52,83,.38), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(23,26,45,.72), transparent 36%),
        linear-gradient(
            135deg,
            var(--void),
            var(--ink) 52%,
            var(--black)
        );
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:
        linear-gradient(rgba(175,173,179,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(175,173,179,.035) 1px, transparent 1px);

    background-size:64px 64px;

    mask-image:
        radial-gradient(circle at center, black, transparent 78%);
}

.shell{
    width:min(1280px, calc(100% - 40px));
    margin:0 auto;
    position:relative;
    z-index:2;
}

/* -------------------------------- */
/* HEADER                           */
/* -------------------------------- */

.site-header{
    height:90px;

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

.brand-small{
    display:flex;
    align-items:center;
    gap:14px;

    color:var(--white);
    text-decoration:none;

    font-size:13px;
    letter-spacing:.34em;
    text-transform:uppercase;
}

.mark{
    width:48px;
    height:48px;

    position:relative;

    border-right:3px solid var(--silver);
    border-top:1px solid rgba(175,173,179,.15);
    border-bottom:1px solid rgba(175,173,179,.15);
    border-radius:50%;

    filter:drop-shadow(0 0 18px rgba(175,173,179,.18));
}

.mark::before{
    content:"";

    position:absolute;

    left:11px;
    top:17px;

    width:21px;
    height:2px;

    background:var(--silver);
    border-radius:999px;
}

.mark::after{
    content:"";

    position:absolute;

    left:16px;
    top:28px;

    width:11px;
    height:2px;

    background:var(--silver);
    border-radius:999px;
}

.parent-note{
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(175,173,179,.58);
}

/* -------------------------------- */
/* HERO                             */
/* -------------------------------- */

main{
    padding:60px 0 90px;
}

.hero{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:start;
}

.intro-kicker{
    font-size:13px;
    letter-spacing:.38em;
    text-transform:uppercase;

    color:rgba(175,173,179,.72);

    margin-bottom:22px;
}

h1{
    color:var(--white);

    font-weight:300;
    font-size:clamp(48px,7vw,86px);

    line-height:1.05;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.intro-line{
    width:100%;
    max-width:340px;
    height:1px;

    margin:34px 0;

    background:rgba(175,173,179,.28);
}

.intro-copy{
    font-size:17px;
    line-height:1.8;
    color:rgba(175,173,179,.76);
}

/* -------------------------------- */
/* VENTURES                         */
/* -------------------------------- */

.ventures{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:28px;
}

.venture-card{
    display:flex;
    flex-direction:column;

    min-height:700px;

    text-decoration:none;

    border-radius:34px;
    padding:40px;

    overflow:hidden;
    position:relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.venture-card:hover{
    transform:translateY(-6px);
}

.venture-card::before{
    content:"";

    position:absolute;
    inset:18px;

    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;
}

/* -------------------------------- */
/* A&H CARD                         */
/* -------------------------------- */

.venture-card--ah{
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.42), transparent 30%),
        linear-gradient(135deg,var(--ah-bg),var(--ah-soft));

    color:var(--ah-dark);

    box-shadow:
        0 28px 80px rgba(0,0,0,.35);
}

/* -------------------------------- */
/* LABS CARD                        */
/* -------------------------------- */

.venture-card--labs{
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(135deg,var(--labs-bg),var(--labs-soft));

    color:var(--labs-dark);

    box-shadow:
        0 28px 80px rgba(0,0,0,.35);
}

.venture-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:36px;
}

.venture-mark{
    width:92px;
    height:92px;

    border-radius:50%;
    border:3px solid currentColor;

    display:grid;
    place-items:center;

    font-size:22px;
    font-weight:800;
}

.venture-label{
    text-align:right;

    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;

    opacity:.7;
}

.venture-title{
    font-size:clamp(34px,5vw,58px);
    line-height:1;
    margin-bottom:22px;
}

.venture-title span{
    display:block;
}

.venture-copy{
    font-size:17px;
    line-height:1.7;

    opacity:.82;

    margin-bottom:28px;
}

.venture-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:32px;
}

.venture-tag{
    padding:10px 14px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;

    border:1px solid rgba(255,255,255,.12);
}

.venture-action{
    margin-top:auto;

    text-transform:uppercase;

    font-size:13px;
    font-weight:800;
    letter-spacing:.18em;

    padding-top:24px;
}

/* -------------------------------- */
/* A&H CARD                         */
/* -------------------------------- */

.venture-card--ah{
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.42), transparent 30%),
        linear-gradient(135deg,var(--ah-bg),var(--ah-soft));

    color:var(--ah-dark);

    box-shadow:
        0 28px 80px rgba(0,0,0,.35);
}

/* -------------------------------- */
/* LABS CARD - SKETCH NOTEBOOK      */
/* -------------------------------- */

.venture-card--labs{
    color:#25231f;

 background:
        linear-gradient(
            rgba(231,222,202,.72),
            rgba(231,222,202,.72)
        ),
        linear-gradient(
            90deg,
            transparent 56px,
            rgba(150,90,90,.12) 57px,
            transparent 58px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 34px,
            rgba(60,70,90,.08) 35px,
            transparent 36px
        ),
        #e7deca;

    border:2px solid rgba(37,35,31,.34);
    border-radius:26px;

    box-shadow:
        0 28px 80px rgba(0,0,0,.35),
        10px 12px 0 rgba(37,35,31,.16),
        inset 0 0 70px rgba(37,35,31,.045);

    transform:rotate(.65deg);
}

.venture-card--labs:hover{
    transform:translateY(-6px) rotate(.65deg);
}

.venture-card--labs::before{
    inset:18px;
    border:1px dashed rgba(37,35,31,.28);
    border-radius:20px;
}

.venture-card--labs::after{
    content:"";
    position:absolute;
    right:28px;
    bottom:26px;
    width:230px;
    height:230px;
    pointer-events:none;
    opacity:.26;

    border:3px solid rgba(37,35,31,.58);
    border-radius:50%;

    background:
        linear-gradient(165deg, transparent 0 58%, rgba(37,35,31,.14) 59% 100%),
        repeating-linear-gradient(
            145deg,
            transparent 0,
            transparent 8px,
            rgba(37,35,31,.18) 9px,
            transparent 11px
        );

    box-shadow:inset -24px 0 0 rgba(37,35,31,.12);
}

.venture-card--labs .venture-top{
    position:relative;
    z-index:2;
}

.venture-card--labs .venture-mark{
    width:94px;
    height:94px;

    border:2px solid rgba(37,35,31,.78);
    border-radius:50%;

    color:#25231f;
    font-family:Georgia, "Times New Roman", serif;
    font-size:24px;
    font-weight:400;

    background:rgba(255,255,255,.1);

    box-shadow:
        inset -12px 0 0 rgba(37,35,31,.14),
        3px 3px 0 rgba(37,35,31,.1);

    transform:rotate(-5deg);
}

.venture-card--labs .venture-label,
.venture-card--labs .venture-copy,
.venture-card--labs .venture-action{
    color:rgba(37,35,31,.72);
}

.venture-card--labs .venture-title{
    position:relative;
    z-index:2;

    color:#25231f;
    font-family:Georgia, "Times New Roman", serif;
    font-weight:400;
    letter-spacing:.02em;
}

.venture-card--labs .venture-title::after{
    content:"";
    display:block;
    width:150px;
    height:2px;
    margin-top:24px;

    background:rgba(37,35,31,.42);
    transform:rotate(-1.5deg);
}

.venture-card--labs .venture-copy,
.venture-card--labs .venture-tags,
.venture-card--labs .venture-action{
    position:relative;
    z-index:2;
}

.venture-card--labs .venture-tag{
    border:2px solid rgba(37,35,31,.28);
    background:rgba(255,255,255,.16);
    color:rgba(37,35,31,.76);

    box-shadow:2px 2px 0 rgba(37,35,31,.07);
}

.venture-card--labs .venture-action{
    margin-top:auto;
}

/* -------------------------------- */
/* FOOTER                           */
/* -------------------------------- */

.footer{
    padding:0 0 28px;

    text-align:center;

    font-size:12px;
    letter-spacing:.34em;
    text-transform:uppercase;

    color:rgba(175,173,179,.48);
}

/* -------------------------------- */
/* MOBILE                           */
/* -------------------------------- */

/* -------------------------------- */
/* RESPONSIVE                       */
/* -------------------------------- */

@media (max-width:1100px){

    .hero{
        grid-template-columns:1fr;
        gap:48px;
    }

    .parent-note{
        display:none;
    }

    .ventures{
        display:flex;
        gap:22px;

        overflow-x:auto;
        overflow-y:hidden;

        padding-bottom:16px;

        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .ventures::-webkit-scrollbar{
        height:8px;
    }

    .ventures::-webkit-scrollbar-track{
        background:transparent;
    }

    .ventures::-webkit-scrollbar-thumb{
        background:rgba(255,255,255,.15);
        border-radius:999px;
    }

    .venture-card{
        flex:0 0 min(420px, 78vw);
        min-height:560px;

        scroll-snap-align:start;
    }
}

@media (max-width:700px){

    .shell{
        width:100%;
    }

    .site-header{
        height:74px;
        padding:0 18px;
    }

    main{
        padding:42px 0 70px;
    }

    .hero{
        padding:0 18px;
        gap:36px;
    }

    .intro-copy{
        font-size:15px;
    }

    h1{
        letter-spacing:.08em;
    }

    .ventures{
        gap:18px;
        padding:0 18px 18px;
    }

    .venture-card{
        flex:0 0 min(290px, 82vw);

        min-height:420px;

        padding:24px;

        border-radius:22px;
    }

    .venture-top{
        margin-bottom:22px;
    }

    .venture-mark{
        width:58px;
        height:58px;
        font-size:16px;
    }

    .venture-title{
        font-size:34px;
        margin-bottom:16px;
    }

    .venture-copy{
        font-size:15px;
        line-height:1.6;
        margin-bottom:18px;
    }

    .venture-tags{
        gap:8px;
        margin-bottom:20px;
    }

    .venture-tag{
        padding:7px 10px;
        font-size:11px;
    }

    .venture-action{
        font-size:11px;
    }
}