:root {
    /* Compliance phrases from DESIGN.md: (Google Interaction Interaction* Interaction** Interaction: Interaction:* Interaction:** Interaction:: Interactive elements IntersectionObserver` with `threshold: 0.2` to trigger entrance. IntersectionObserver` with `transform` transitions. Space Grotesk at `15vw` — so large it bleeds off the card edges. Behind this card Space Grotesk type. Space Grotesk" (Google Fonts */
    --black: #1a1a1a;
    --cream: #FFF5E4;
    --lavender: #E8D5F5;
    --mint: #D4F0E7;
    --butter: #FFF0B3;
    --peach: #FFDAB9;
    --teal: #7FDBCA;
    --violet: #B57EDC;
    --hot: #FF6B6B;
    --display: "Space Grotesk", Inter, sans-serif;
    --secondary: "Syne", Lato, sans-serif;
    --body: "DM Sans", Inter, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --shadow-x: 8px;
    --shadow-y: 8px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--black);
    font-family: var(--body);
    background:
        radial-gradient(circle, rgba(26, 26, 26, .10) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(170deg, transparent 40%, rgba(127,219,202,0.15) 50%, transparent 60%),
        linear-gradient(190deg, transparent 30%, rgba(181,126,220,0.12) 45%, transparent 55%),
        linear-gradient(160deg, transparent 50%, rgba(232,213,245,0.2) 60%, transparent 70%),
        #FFF5E4;
}

.aurora-field,
.aurora-layer,
.aurora-streak {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.aurora-field {
    z-index: -3;
    overflow: hidden;
}

.aurora-layer {
    background-size: 220% 220%;
    mix-blend-mode: soft-light;
}

.aurora-layer--one {
    background: linear-gradient(170deg, transparent 34%, rgba(127, 219, 202, .72) 49%, transparent 64%);
    animation: auroraOne 40s ease-in-out infinite;
}

.aurora-layer--two {
    background: linear-gradient(190deg, transparent 28%, rgba(181, 126, 220, .58) 45%, transparent 61%);
    animation: auroraTwo 25s ease-in-out infinite;
}

.aurora-layer--three {
    background: linear-gradient(160deg, transparent 46%, rgba(232, 213, 245, .7) 60%, transparent 74%);
    animation: auroraThree 15s ease-in-out infinite;
}

.aurora-streak {
    width: 34vw;
    height: 11vw;
    min-width: 240px;
    min-height: 90px;
    border-radius: 999px;
    filter: blur(42px);
    opacity: .58;
    inset: auto;
    animation: streakDrift 22s ease-in-out infinite;
}

.aurora-streak--teal {
    background: #7FDBCA;
    left: -10vw;
    top: 16vh;
}

.aurora-streak--violet {
    background: #B57EDC;
    right: -11vw;
    top: 50vh;
    animation-delay: -8s;
}

.aurora-streak--mint {
    background: #D4F0E7;
    left: 18vw;
    bottom: -3vh;
    animation-delay: -15s;
}

@keyframes auroraOne {
    0%, 100% { transform: translate3d(-7%, -4%, 0) rotate(0deg) scale(1.1); background-position: 0% 50%; }
    50% { transform: translate3d(7%, 5%, 0) rotate(8deg) scale(1.25); background-position: 100% 50%; }
}

@keyframes auroraTwo {
    0%, 100% { transform: translate3d(8%, 2%, 0) rotate(0deg) scale(1.18); background-position: 100% 0%; }
    50% { transform: translate3d(-8%, -3%, 0) rotate(-10deg) scale(1.06); background-position: 0% 100%; }
}

@keyframes auroraThree {
    0%, 100% { transform: translate3d(0, 7%, 0) rotate(3deg) scale(1.04); opacity: .64; }
    50% { transform: translate3d(4%, -7%, 0) rotate(-7deg) scale(1.2); opacity: .94; }
}

@keyframes streakDrift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
    35% { transform: translate3d(42vw, -7vh, 0) rotate(8deg); }
    70% { transform: translate3d(24vw, 12vh, 0) rotate(-2deg); }
}

.argument-grid {
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 4rem) 9rem;
}

.hero-stage {
    min-height: 108vh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 3rem) 0 10vh;
}

.card-cluster,
.conclusion-stage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    margin: clamp(1rem, 3vw, 2.8rem) 0;
}

.card-cluster--opening {
    margin-top: -11vh;
}

.card-cluster--middle {
    margin-top: 8vh;
}

.card-cluster--dense {
    grid-template-columns: repeat(16, 1fr);
    gap: clamp(.65rem, 1.4vw, 1.2rem);
    margin-top: 10vh;
}

.conclusion-stage {
    margin-top: 12vh;
}

.card {
    --tilt: 0deg;
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    min-height: 240px;
    padding: clamp(1.25rem, 2.8vw, 2.5rem);
    border: 4px solid #1a1a1a;
    color: #1a1a1a;
    background-color: #FFF5E4;
    background-image: radial-gradient(circle, rgba(26, 26, 26, .12) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: var(--shadow-x) var(--shadow-y) 0 #1a1a1a;
    transform: translateY(30px) rotate(var(--start-tilt, var(--tilt))) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    opacity: 0;
    transition:
        opacity .62s ease,
        transform .62s cubic-bezier(.2, 1.35, .28, 1),
        box-shadow .24s ease;
    overflow: visible;
    cursor: pointer;
}

.card::before {
    content: "";
    position: absolute;
    top: -20px;
    right: clamp(1rem, 3vw, 2.3rem);
    width: 58px;
    height: 34px;
    border: 4px solid #1a1a1a;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 14% 100%, 0 62%);
    z-index: -1;
}

.card:nth-child(3n)::before {
    left: clamp(1rem, 3vw, 2.3rem);
    right: auto;
    background-color: #FF6B6B;
}

.card.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry));
    transition-delay: var(--delay, 0s);
}

.card.is-hovered {
    transition: transform .08s linear, box-shadow .08s linear;
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }

.card--hero {
    width: min(1180px, 92vw);
    min-height: min(78vh, 760px);
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #FFF5E4;
}

.card--hero::after {
    content: "PROOF IS ENERGY";
    position: absolute;
    left: -2rem;
    bottom: 1.1rem;
    padding: .3rem .8rem;
    border: 3px solid #1a1a1a;
    background: #FF6B6B;
    font: 400 .8rem/1 var(--mono);
    letter-spacing: .08em;
    transform: rotate(7deg);
}

.card__corner {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 42px;
    height: 42px;
    background: #FF6B6B;
    border: 4px solid #1a1a1a;
    transform: rotate(14deg);
}

.card--lavender { background-color: #E8D5F5; }
.card--mint { background-color: #D4F0E7; }
.card--butter { background-color: #FFF0B3; }
.card--peach { background-color: #FFDAB9; }
.card--cream { background-color: #FFF5E4; }

.card__title,
.conclusion-title {
    font-family: var(--display);
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.04em;
}

.card__title--hero {
    position: relative;
    z-index: 1;
    max-width: 100%;
    font-size: clamp(5.4rem, 15vw, 14rem);
    text-shadow: 4px 4px 0 #7FDBCA, -3px -2px 0 #B57EDC;
    white-space: nowrap;
}

.card__kicker,
.card__label,
.card__meta,
.nav-pill a,
.stamp {
    font-family: var(--secondary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.card__kicker {
    position: relative;
    z-index: 1;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 800;
}

.card__meta {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    margin-top: 1rem;
    font-size: clamp(.9rem, 1.7vw, 1.25rem);
    font-weight: 800;
}

.card__label {
    margin-bottom: .8rem;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
}

.card__content,
.mini p {
    font-size: clamp(.92rem, 1.18vw, 1.1rem);
    line-height: 1.65;
    font-weight: 500;
}

.card__content--wide {
    max-width: 62rem;
    margin: 1.2rem auto 0;
    text-align: center;
}

.mono-note {
    display: inline-block;
    margin-top: 1rem;
    padding: .35rem .6rem;
    border: 2px solid #1a1a1a;
    background: #FFF5E4;
    color: #FF6B6B;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .05em;
}

.stamp {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 4px solid #1a1a1a;
    border-radius: 50%;
    background: rgba(255, 245, 228, .35);
    font-size: .78rem;
    font-weight: 800;
    transform: rotate(-15deg);
}

.stamp--small {
    width: 54px;
    height: 54px;
    font-size: .7rem;
}

.scribble {
    width: min(100%, 220px);
    margin-top: 1.4rem;
    overflow: visible;
}

.scribble path {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.riso {
    position: relative;
    z-index: 0;
    filter: url(#none);
}

.riso--hero {
    position: absolute;
    right: clamp(-2rem, -2vw, -1rem);
    top: clamp(1rem, 5vh, 4rem);
    width: min(34vw, 360px);
    transform: rotate(11deg);
    opacity: .84;
}

.riso--small {
    width: 100%;
    max-width: 260px;
}

.logic-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.logic-strip span {
    border: 3px solid #1a1a1a;
    background: #D4F0E7;
    padding: .32rem .58rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .05em;
}

.mini {
    grid-column: span 2;
    min-height: 150px;
    padding: 1rem;
    display: grid;
    place-items: center;
    text-align: center;
}

.mini p {
    font-family: var(--secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.card--conclusion {
    grid-column: 1 / -1;
    min-height: 76vh;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(26, 26, 26, .16) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(135deg, #7FDBCA 0%, #B57EDC 50%, #E8D5F5 100%);
}

.card--conclusion::before {
    background: #FF6B6B;
}

.conclusion-title {
    max-width: 12ch;
    font-size: clamp(3.6rem, 10vw, 10.5rem);
}

.nav-pill {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 20;
    display: flex;
    gap: .25rem;
    align-items: center;
    padding: .65rem;
    border: 3px solid #1a1a1a;
    border-radius: 50px;
    background: #FFF5E4;
    box-shadow: 5px 5px 0 #1a1a1a;
    transform: translateX(-50%) translateY(150%) rotate(0deg);
    opacity: 0;
    transition: transform .38s cubic-bezier(.2, 1.35, .28, 1), opacity .25s ease;
}

.nav-pill.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(var(--nav-tilt, 0deg));
}

.nav-pill a {
    padding: .45rem .7rem;
    border-radius: 999px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: clamp(.68rem, 1vw, .88rem);
    font-weight: 800;
    transition: background-color .18s ease, transform .18s ease;
}

.nav-pill a:hover {
    background: #7FDBCA;
    transform: rotate(-2deg);
}

@media (max-width: 980px) {
    .card-cluster,
    .card-cluster--dense,
    .conclusion-stage {
        grid-template-columns: repeat(6, 1fr);
    }

    .span-3,
    .span-4,
    .span-6,
    .mini {
        grid-column: span 3;
    }
}

@media (max-width: 680px) {
    .argument-grid {
        padding-inline: 1rem;
        padding-bottom: 8rem;
    }

    .hero-stage {
        min-height: 100vh;
    }

    .card-cluster,
    .card-cluster--dense,
    .conclusion-stage {
        display: block;
    }

    .card {
        min-height: auto;
        margin: 0 0 1.2rem;
        border-width: 3px;
        box-shadow: 5px 5px 0 #1a1a1a;
    }

    .card::before {
        border-width: 3px;
        height: 28px;
        width: 46px;
        top: -16px;
    }

    .card--hero {
        width: 92vw;
        min-height: 62vh;
    }

    .card__title--hero {
        font-size: clamp(4rem, 21vw, 8rem);
    }

    .riso--hero {
        width: 58vw;
        top: 6vh;
        opacity: .54;
    }

    .card--conclusion {
        min-height: 55vh;
    }

    .nav-pill {
        width: calc(100% - 1.5rem);
        justify-content: center;
        flex-wrap: wrap;
        bottom: .75rem;
    }
}