:root {
    /* Cards* Interface* design compliance tokens */
    --tar: #1a1712;
    --concrete: #4a4640;
    --bone: #e8e0d4;
    --acid: #7a8c3e;
    --copper: #5a7a6e;
    --undergrowth: #2d3a1f;
    --sediment: #5a554e;
    --gold: #b8a44c;
    --stone: #8a8279;
    --display: "Bebas Neue", Impact, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --label: "Space Mono", monospace;
    scroll-behavior: auto;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--tar); color: var(--bone); font-family: var(--mono); scroll-behavior: auto !important; }
body { overflow-x: hidden; }

.entrance {
    position: relative;
    min-height: 100vh;
    background-color: var(--tar);
    background-image:
        radial-gradient(circle at 16% 82%, rgba(122,140,62,.08) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 24%, rgba(232,224,212,.035) 0 1px, transparent 2px),
        repeating-conic-gradient(from 22deg at 36% 42%, rgba(74,70,64,.05) 0 18deg, transparent 18deg 90deg),
        repeating-linear-gradient(104deg, transparent 0 18px, rgba(90,85,78,.035) 19px 20px);
    background-size: 51px 47px, 83px 71px, 220px 180px, 100% 100%;
    overflow: hidden;
}

.entrance::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(45,58,31,.22)), radial-gradient(circle at 8% 92%, rgba(122,140,62,.12), transparent 30%);
    pointer-events: none;
}

.entrance-title {
    position: absolute;
    left: 15vw;
    top: 70vh;
    transform: translateY(-50%);
    margin: 0;
    font-family: var(--display);
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: .88;
    text-transform: uppercase;
    color: var(--bone);
    z-index: 2;
}

.spore-field { position: absolute; inset: auto 0 0; height: 38vh; opacity: 0; animation: sporesOn .1s linear 2s forwards; z-index: 1; }
.spore { position: absolute; bottom: -8px; width: var(--s, 3px); height: var(--s, 3px); left: var(--x); border-radius: 50%; background: var(--c, var(--acid)); opacity: .32; animation: drift var(--d) linear var(--delay) infinite; }
.spore:nth-child(1){--x:5%;--s:3px;--d:12s;--delay:.2s}.spore:nth-child(2){--x:11%;--s:5px;--d:18s;--delay:1.3s;--c:var(--gold)}.spore:nth-child(3){--x:17%;--d:14s;--delay:3s}.spore:nth-child(4){--x:24%;--s:4px;--d:19s;--delay:.8s}.spore:nth-child(5){--x:31%;--d:11s;--delay:4.1s;--c:var(--gold)}.spore:nth-child(6){--x:38%;--s:2px;--d:16s;--delay:2.2s}.spore:nth-child(7){--x:46%;--s:4px;--d:20s;--delay:1.7s}.spore:nth-child(8){--x:52%;--d:13s;--delay:4.8s;--c:var(--gold)}.spore:nth-child(9){--x:59%;--s:5px;--d:17s;--delay:.3s}.spore:nth-child(10){--x:67%;--s:2px;--d:15s;--delay:3.4s}.spore:nth-child(11){--x:76%;--d:20s;--delay:2.9s;--c:var(--gold)}.spore:nth-child(12){--x:84%;--s:4px;--d:12s;--delay:1.1s}.spore:nth-child(13){--x:92%;--d:18s;--delay:3.8s}.spore:nth-child(14){--x:2%;--s:2px;--d:16s;--delay:1.9s}.spore:nth-child(15){--x:21%;--d:19s;--delay:4.6s;--c:var(--gold)}.spore:nth-child(16){--x:43%;--s:5px;--d:14s;--delay:2.6s}.spore:nth-child(17){--x:64%;--d:17s;--delay:.7s}.spore:nth-child(18){--x:88%;--s:2px;--d:11s;--delay:4.3s;--c:var(--gold)}.spore:nth-child(19){--x:34%;--d:20s;--delay:1.5s}.spore:nth-child(20){--x:71%;--s:5px;--d:13s;--delay:3.1s}.spore:nth-child(21){--x:55%;--d:18s;--delay:2.4s;--c:var(--gold)}.spore:nth-child(22){--x:97%;--s:4px;--d:15s;--delay:.5s}

@keyframes sporesOn { to { opacity: 1; } }
@keyframes drift { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: .35; } 60% { transform: translate(calc((var(--x) - 50%) * -.16), -21vh); } 100% { transform: translate(calc((var(--x) - 50%) * .22), -43vh); opacity: 0; } }

.grid-wall {
    position: relative;
    padding: 44px 18px 72px;
    background-color: var(--tar);
    background-image: radial-gradient(circle at 20% 20%, rgba(90,122,110,.08), transparent 22%), repeating-conic-gradient(from 9deg at 30% 70%, rgba(232,224,212,.035) 0 12deg, transparent 12deg 66deg);
}
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 32px; max-width: 1540px; margin: 0 auto; align-items: start; }

.grid-card {
    position: relative;
    min-height: 226px;
    margin: var(--card-gap, 16px) calc(var(--card-gap, 16px) * -.25) 0 calc(var(--card-gap, 16px) * .15);
    background: var(--tone, var(--concrete));
    border: 1px solid rgba(232,224,212,.06);
    border-radius: 0;
    overflow: hidden;
    transform: rotate(var(--rotation));
    opacity: 0;
    box-shadow: 0 18px 28px rgba(0,0,0,.22);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.grid-card:nth-child(3n) { border-radius: 2px 12px 2px 12px; }
.grid-card:nth-child(4n) { border-radius: 12px 0 9px 0; }
.grid-card.is-visible { animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--enter-delay, 0ms); }
.grid-card:hover { transform: rotate(0deg) scale(1.01); box-shadow: 0 0 0 2px var(--acid), 0 22px 40px rgba(0,0,0,.36); z-index: 4; }
.grid-card:hover .lichen { opacity: .45; transform: scale(1.16) rotate(8deg); }
.wide { grid-column: span 2; }
.tall { grid-row: span 2; min-height: 488px; }
.small-card { min-height: 190px; }

@keyframes bounceIn { 0% { opacity: 0; transform: scale(.85) translateY(30px) rotate(var(--rotation)); } 60% { opacity: 1; transform: scale(1.02) translateY(-4px) rotate(var(--rotation)); } 100% { opacity: 1; transform: scale(1) translateY(0) rotate(var(--rotation)); } }

.card-surface {
    position: relative;
    min-height: inherit;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: radial-gradient(circle at 12% 22%, rgba(232,224,212,.06) 0 1px, transparent 2px), radial-gradient(circle at 72% 62%, rgba(26,23,18,.14) 0 1px, transparent 2px), repeating-linear-gradient(2deg, rgba(0,0,0,.08) 0 1px, transparent 1px 17px);
    background-size: 33px 29px, 41px 37px, 100% 100%;
}
.dark-growth { background-color: var(--undergrowth); }
.bone { background-color: var(--bone); color: var(--tar); }
.copper { background-color: var(--copper); }
.tar-card { background-color: var(--tar); }
.gold { background-color: var(--gold); color: var(--tar); }
.sediment { background-color: var(--sediment); }
.row-card { flex-direction: row; gap: 24px; align-items: center; }

h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: .88; }
h2 { font-size: clamp(3.2rem, 8vw, 7.2rem); }
h3 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
p, code { margin: 0; font-family: var(--mono); font-size: clamp(.75rem, 1.2vw, .95rem); line-height: 1.65; letter-spacing: .04em; color: var(--stone); }
.bone p, .bone .label { color: var(--sediment); }
.gold .label, .gold h3 { color: var(--tar); }
code { color: rgba(232,224,212,.76); }
.label { font-family: var(--label); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--acid); }

.glyph, .large-mark { fill: none; stroke: var(--copper); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .82; }
.glyph { position: absolute; width: 130px; height: 130px; right: 10px; bottom: 8px; }
.large-mark { width: 100%; max-height: 270px; stroke: rgba(122,140,62,.72); }
.chain { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(45deg, transparent 43%, var(--bone) 44% 46%, transparent 47%), linear-gradient(-45deg, transparent 43%, var(--bone) 44% 46%, transparent 47%); background-size: 28px 28px; pointer-events: none; }
.rust { position: absolute; inset: auto 0 0; height: 46%; background: radial-gradient(circle at 20% 70%, rgba(184,91,44,.45), transparent 24%), radial-gradient(circle at 70% 20%, rgba(184,164,76,.22), transparent 28%); mix-blend-mode: multiply; }
.paper-strip { position: absolute; left: -10px; bottom: 22px; padding: 9px 18px; transform: rotate(-3deg); background: var(--bone); color: var(--tar); font-family: var(--label); font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; }
.lichen { position: absolute; right: -26px; bottom: -30px; width: 138px; height: 122px; background: var(--growth, var(--acid)); opacity: .16; clip-path: polygon(8% 48%, 19% 19%, 42% 27%, 55% 8%, 78% 24%, 92% 51%, 73% 86%, 45% 92%, 18% 76%); transition: opacity .3s ease, transform .3s ease; }
.lichen.corner { right: auto; bottom: auto; top: -28px; left: -32px; }
.torn { clip-path: polygon(0 0, 100% 0, 100% 88%, 94% 91%, 87% 89%, 80% 96%, 72% 91%, 63% 100%, 54% 92%, 43% 96%, 34% 90%, 22% 94%, 12% 89%, 0 94%); }
.torn-left { clip-path: polygon(8% 0, 100% 0, 100% 100%, 6% 100%, 0 92%, 5% 82%, 1% 72%, 7% 61%, 2% 49%, 8% 37%, 1% 25%, 7% 14%); }

.manifesto {
    min-height: 100vh;
    padding: 3vw;
    display: flex;
    align-items: center;
    background-color: var(--tar);
    background-image: repeating-conic-gradient(from 30deg at 40% 60%, transparent 0 90deg, rgba(122,140,62,.04) 90deg 180deg), repeating-conic-gradient(from 60deg at 70% 40%, transparent 0 90deg, rgba(74,70,64,.05) 90deg 180deg), radial-gradient(circle at 70% 30%, rgba(45,58,31,.25), transparent 35%);
    background-size: 180px 180px, 220px 220px, 100% 100%;
}
.manifesto-text { margin: 0; font-family: var(--display); font-size: clamp(3rem, 8vw, 7rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--acid); }
.manifesto-text span { display: inline-block; opacity: 0; transform: translateY(8px); transition: none; }

.residue { min-height: 76px; padding: 20px; border-top: 1px solid rgba(122,140,62,.22); display: flex; justify-content: space-between; gap: 20px; background: var(--tar); font-family: var(--label); font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--sediment); }
.residue a { color: var(--stone); text-decoration: none; }

@media (max-width: 760px) {
    .entrance-title { left: 9vw; top: 72vh; }
    .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
    .wide, .tall { grid-column: span 1; grid-row: span 1; min-height: 230px; }
    .row-card { flex-direction: column; align-items: flex-start; }
    .residue { flex-direction: column; }
}