*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#E8E3DA;color:#4A4A4A;font-family:'Commissioner',sans-serif;font-weight:400;font-size:clamp(1rem,2.5vw,1.125rem);line-height:1.8;letter-spacing:0.005em;overflow-x:hidden}

/* Particle field */
.particle-field{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particleDrift var(--dur) ease-in-out infinite;transform:translate(var(--drift-x,0px),var(--drift-y,0px));transition:transform 2s cubic-bezier(0.25,0.1,0.25,1);opacity:var(--p-opacity,0.5)}

@keyframes particleDrift{
0%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) translate(0,0)}
25%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) translate(var(--ox1),var(--oy1))}
50%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) translate(var(--ox2),var(--oy2))}
75%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) translate(var(--ox3),var(--oy3))}
100%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) translate(0,0)}
}

/* Column */
.column{max-width:680px;margin-left:15%;position:relative;z-index:2}

/* Folds */
.fold{position:relative;z-index:1;overflow:visible;padding:0 clamp(16px,4vw,48px)}

.fold-premise{min-height:100vh;display:flex;align-items:center}
.fold-observation{min-height:80vh;padding-top:clamp(60px,10vw,120px);padding-bottom:clamp(60px,10vw,120px)}
.fold-evidence{padding-top:clamp(60px,10vw,120px);padding-bottom:clamp(60px,10vw,120px)}
.fold-shift{min-height:100vh;display:flex;align-items:center;background:#2C2C2C;color:#F5F2ED;transition:background 0.3s ease,color 0.3s ease}
.fold-residue{min-height:60vh;padding-top:clamp(60px,10vw,120px);padding-bottom:clamp(120px,20vw,240px)}

/* Premise text -- variable weight animation */
.premise-text{font-weight:300;font-size:clamp(2.8rem,6vw,4.2rem);line-height:1.15;letter-spacing:-0.02em;max-width:16ch;font-variation-settings:'wght' 200;transition:font-variation-settings 0.8s ease}
.premise-text.weighted{font-variation-settings:'wght' 300}

/* Body text */
.body-text{max-width:38em;margin-bottom:clamp(24px,4vw,48px)}

/* Pivot text (Fold 4) */
.pivot-text{font-weight:700;font-size:clamp(1.4rem,3.5vw,2rem);line-height:1.25;max-width:28ch}

/* Residue text */
.residue-text{font-size:0.875rem;line-height:1.7;max-width:34em;margin-bottom:clamp(20px,3vw,40px);opacity:0.8}

/* Labels */
.specimen-label{font-weight:200;font-size:0.75rem;line-height:1.4;letter-spacing:0.08em;text-transform:uppercase;display:block;margin-top:12px;color:#7A8B8B}

/* Specimen cards */
.specimen-card{position:relative;border:1px solid #4A4A4A;padding:clamp(20px,3vw,32px);margin-bottom:2rem;background:#F5F2ED;transition:transform 500ms cubic-bezier(0.34,1.56,0.64,1),border-color 300ms ease}
.specimen-card.flush-left{margin-left:0}
.specimen-card.indented{margin-left:40px}
.specimen-text{font-weight:500;font-size:clamp(0.875rem,2vw,1rem);line-height:1.6}

/* Card accents */
.card-accent{position:absolute;top:-12px;right:-12px;z-index:3;transition:transform 300ms ease}

/* Collage fragments */
.collage-fragment{position:absolute;pointer-events:none;opacity:0;transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.collage-fragment.entered{opacity:var(--frag-opacity,0.6)}

/* Torn rectangles */
.torn-rect{clip-path:polygon(2% 0%,98% 1%,100% 3%,99% 97%,97% 100%,3% 99%,0% 96%,1% 2%)}

/* Clipped circles */
.clipped-circle,.torn-circle{border-radius:50%;clip-path:polygon(5% 10%,15% 2%,30% 0%,50% 3%,70% 0%,85% 5%,95% 15%,100% 30%,98% 50%,100% 70%,95% 85%,88% 95%,70% 100%,50% 97%,30% 100%,15% 92%,5% 80%,0% 65%,2% 45%,0% 25%)}

/* Angular fragments */
.angular-frag{clip-path:polygon(10% 0%,100% 15%,85% 100%,0% 80%)}

/* Specific fragment positions and colors */
.frag-premise-1{width:260px;height:160px;background:#7A8B8B;opacity:0;top:60%;left:12%;transform:rotate(2deg);--frag-opacity:0.6}
.frag-premise-2{width:90px;height:90px;background:#9EAD91;opacity:0;top:30%;right:25%;--frag-opacity:0.7}
.frag-premise-3{width:60px;height:60px;background:#7A8B8B;opacity:0;bottom:20%;left:55%;--frag-opacity:0.5}

.frag-obs-1{position:relative;width:200px;height:120px;background:#9EAD91;margin-left:auto;margin-right:-30px;transform:rotate(-2deg);margin-bottom:clamp(16px,3vw,32px);--frag-opacity:0.6}
.frag-obs-2{position:relative;width:160px;height:100px;background:#C4785A;margin-left:auto;margin-right:-20px;transform:rotate(3deg);margin-bottom:clamp(16px,3vw,32px);--frag-opacity:0.55}
.frag-obs-3{position:relative;width:80px;height:80px;background:#9EAD91;margin-left:60%;transform:rotate(-1deg);margin-top:-40px;margin-bottom:clamp(16px,3vw,32px);--frag-opacity:0.65}

.card-accent-1{width:70px;height:70px;background:#9EAD91;--frag-opacity:0.7}
.card-accent-2{width:50px;height:50px;background:#7A8B8B;clip-path:polygon(10% 0%,100% 15%,85% 100%,0% 80%);border-radius:0;--frag-opacity:0.5}
.card-accent-3{width:80px;height:50px;background:#C4785A;--frag-opacity:0.5}
.card-accent-4{width:60px;height:60px;background:#9EAD91;--frag-opacity:0.65}

.frag-evidence-1{width:50px;height:70px;background:#7A8B8B;bottom:10%;right:8%;transform:rotate(6deg);--frag-opacity:0.4}

.frag-shift-1{width:180px;height:110px;background:#7A8B8B;top:20%;right:10%;transform:rotate(-3deg);--frag-opacity:0.25}
.frag-shift-2{width:100px;height:100px;background:#E8E3DA;bottom:25%;left:8%;--frag-opacity:0.15}

.frag-residue-1{width:140px;height:90px;background:#7A8B8B;top:15%;right:15%;transform:rotate(2deg);--frag-opacity:0.3}
.frag-residue-2{width:45px;height:55px;background:#9EAD91;bottom:30%;left:50%;transform:rotate(-4deg);--frag-opacity:0.25}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Fold 4 particle color override handled in JS */

/* Responsive */
@media(max-width:768px){
.column{margin-left:8%;margin-right:8%;max-width:100%}
.specimen-card.indented{margin-left:20px}
.frag-premise-1{width:180px;height:100px}
.frag-obs-1,.frag-obs-2{width:120px;height:80px;margin-right:-10px}
.frag-shift-1{width:120px;height:70px}
}
@media(max-width:480px){
.column{margin-left:5%;margin-right:5%}
.specimen-card.indented{margin-left:10px}
.collage-fragment:not(.card-accent){display:none}
}