*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1A22;color:#F0EDE8;font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.8vw,1.1rem);line-height:1.65;overflow-x:hidden}

/* Substrate layer */
.substrate{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,#2A2A32 0%,#C0C0C8 45%,#E8E8EE 50%,#C0C0C8 55%,#2A2A32 100%);background-size:400% 400%;opacity:0.08;will-change:transform}
.grain-overlay{position:fixed;inset:0;z-index:2;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAMklEQVQIW2N8+fLlfwYGBgYmBgYGRgYGBiYGBgZGBgYGJgYGBkYGBob/DAwM/xkYGAAAtQYHAb6MrAAAAABJRU5ErkJggg==");background-size:200px;opacity:0.06;pointer-events:none}

/* Nav strip */
.top-strip{position:fixed;top:0;left:0;right:0;z-index:100;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,32px);background:rgba(26,26,34,0.7);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);transition:height 0.3s ease}
.top-strip.compact{height:36px}
.nav-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(0.85rem,1.5vw,1rem);letter-spacing:0.12em;text-transform:uppercase;color:#E8E8EE}
.nav-tags{display:flex;gap:clamp(12px,2vw,24px)}
.hash-tag{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(0.75rem,1.2vw,0.9rem);letter-spacing:0.08em;text-transform:uppercase;color:#9A9590;text-decoration:none;position:relative;transition:color 0.3s ease}
.hash-tag::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(135deg,#2A2A32 0%,#C0C0C8 45%,#E8E8EE 50%,#C0C0C8 55%,#2A2A32 100%);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease,background-position 0.4s ease}
.hash-tag:hover{color:#E8E8EE}
.hash-tag:hover::after{transform:scaleX(1);background-position:100% 0}

/* Masonry */
.masonry{position:relative;z-index:10;column-count:3;column-gap:16px;padding:clamp(80px,10vw,120px) clamp(16px,3vw,48px) clamp(40px,6vw,80px);max-width:1200px;margin:0 auto}

/* Collage cards */
.collage-card{break-inside:avoid;margin-bottom:16px;padding:clamp(20px,3vw,32px);position:relative;background:#2A2A32;box-shadow:4px 4px 0px #1A1A22;clip-path:polygon(2px 0,100% 3px,calc(100% - 1px) calc(100% - 2px),0 calc(100% - 1px));opacity:0;transform:translateY(20px) rotate(var(--card-rot,0deg));transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.collage-card.visible{opacity:1;transform:translateY(0) rotate(var(--card-rot,0deg))}

/* Card types */
.hero-card{padding:clamp(32px,5vw,56px);background:linear-gradient(160deg,#2A2A32,#1A1A22)}
.hero-card .display-head{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:0.08em;line-height:0.95;color:transparent;background:linear-gradient(135deg,#2A2A32 0%,#C0C0C8 45%,#E8E8EE 50%,#C0C0C8 55%,#2A2A32 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:chromeSweep 3s ease forwards}
.hero-card .sub-text{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(0.9rem,1.6vw,1.1rem);color:#9A9590;margin-top:12px;letter-spacing:0.04em}

@keyframes chromeSweep{0%{background-position:-100% 0}100%{background-position:100% 0}}

.chrome-card{padding:clamp(16px,2vw,24px);background:#1A1A22}
.chrome-swatch{width:100%;height:clamp(80px,12vw,140px);background:linear-gradient(135deg,#2A2A32 0%,#C0C0C8 45%,#E8E8EE 50%,#C0C0C8 55%,#2A2A32 100%);background-size:200% 100%;border-radius:2px;position:relative;overflow:hidden}
.chrome-swatch::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.15) 50%,transparent 60%);background-size:200% 100%;animation:shimmer 4s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:-100% 0}50%{background-position:100% 0}}

.chrome-swatch.teal{background:linear-gradient(135deg,#1A1A22 0%,#4A8B8C 45%,#6AADAE 50%,#4A8B8C 55%,#1A1A22 100%);background-size:200% 100%}
.chrome-swatch.coral{background:linear-gradient(135deg,#1A1A22 0%,#FF6B6B 45%,#FF9A9A 50%,#FF6B6B 55%,#1A1A22 100%);background-size:200% 100%}

.card-meta{display:block;margin-top:8px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.7rem;letter-spacing:0.12em;color:#9A9590;text-transform:uppercase}

.text-card{background:#2A2A32}
.text-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:0.08em;text-transform:uppercase;color:#E8E8EE;margin-bottom:8px}
.text-card p{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(0.85rem,1.5vw,1rem);line-height:1.65;color:#9A9590}

.wide-card{column-span:all;background:linear-gradient(90deg,#2A2A32,#1A1A22);padding:clamp(24px,4vw,40px)}
.wide-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:0.08em;text-transform:uppercase;color:#E8E8EE;margin-bottom:12px}
.wide-card p{font-family:'Inter',sans-serif;font-weight:400;color:#F0EDE8;max-width:65ch}

.accent-card{background:linear-gradient(135deg,#B87333,#8B5A28);text-align:center;padding:clamp(28px,4vw,48px)}
.big-stat{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,6rem);letter-spacing:0.04em;color:#F0EDE8;display:block;line-height:1}
.stat-label{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(0.85rem,1.4vw,1rem);color:rgba(240,237,232,0.8);margin-top:8px;display:block}

.closing-line{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:0.08em;text-transform:uppercase;color:#E8E8EE;text-align:center}

/* Card arrow */
.card-arrow{width:60px;height:30px;margin-top:12px}

/* Annotation layer */
.annotation{position:absolute;font-family:'Caveat',cursive;font-weight:400;font-size:clamp(1rem,2vw,1.4rem);color:#FF6B6B;z-index:25;pointer-events:none;opacity:0;transition:opacity 0.5s ease 0.4s}
.collage-card.visible .annotation{opacity:1}

/* Chrome foil strips */
.collage-card::before{content:'';position:absolute;top:-6px;left:20%;width:60px;height:12px;background:linear-gradient(135deg,#2A2A32 0%,#C0C0C8 45%,#E8E8EE 50%,#C0C0C8 55%,#2A2A32 100%);opacity:0.5;transform:rotate(-3deg);z-index:30;border-radius:1px}
.hero-card::before{display:none}

/* Spray paint dots */
.text-card::after{content:'';position:absolute;bottom:10px;right:10px;width:6px;height:6px;border-radius:50%;background:#FF6B6B;box-shadow:8px -4px 0 0 rgba(255,107,107,0.5),16px 2px 0 0 rgba(255,107,107,0.3),-4px -8px 0 0 rgba(255,107,107,0.4);z-index:25}

/* Hover magnetic drift placeholder — handled in JS */
.collage-card{transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}

/* Responsive */
@media(max-width:1024px){
.masonry{column-count:2}
}
@media(max-width:600px){
.masonry{column-count:1;padding-left:12px;padding-right:12px}
.wide-card{column-span:none}
.nav-tags{gap:8px}
.hash-tag{font-size:0.7rem}
}