*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(170deg,#0a1628 0%,#0d3b66 40%,#00526e 100%);color:#caf0f8;font-family:'Recursive',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.6vw,1.1rem);line-height:1.78;overflow-x:hidden;letter-spacing:0.015em;min-height:100vh}

/* Progress Bar */
.progress-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#00b4d8,#90e0ef,#c9a0c9);z-index:100;width:0;transition:width 0.1s}

/* Bokeh */
.bokeh-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bokeh{position:absolute;border-radius:50%;animation:bkDrift linear infinite}
.bk1{width:200px;height:200px;top:10%;left:5%;background:radial-gradient(circle,rgba(0,180,216,0.06),transparent 70%);animation-duration:35s}
.bk2{width:300px;height:300px;top:30%;right:10%;background:radial-gradient(circle,rgba(201,160,201,0.05),transparent 70%);animation-duration:40s}
.bk3{width:150px;height:150px;top:60%;left:20%;background:radial-gradient(circle,rgba(0,180,216,0.07),transparent 70%);animation-duration:28s}
.bk4{width:250px;height:250px;top:70%;right:5%;background:radial-gradient(circle,rgba(224,122,122,0.04),transparent 70%);animation-duration:45s}
.bk5{width:180px;height:180px;top:5%;right:30%;background:radial-gradient(circle,rgba(144,224,239,0.05),transparent 70%);animation-duration:32s}
.bk6{width:120px;height:120px;bottom:10%;left:40%;background:radial-gradient(circle,rgba(45,106,79,0.06),transparent 70%);animation-duration:25s}
@keyframes bkDrift{0%{transform:translate(0,0)}25%{transform:translate(20px,-15px)}50%{transform:translate(-10px,20px)}75%{transform:translate(15px,10px)}100%{transform:translate(0,0)}}

main{position:relative;z-index:1}

/* Atrium */
.atrium{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(2rem,4vw,4rem)}
.atrium-title{font-family:'Recursive',sans-serif;font-weight:800;font-size:clamp(2.5rem,7vw,6rem);color:#caf0f8;letter-spacing:0.02em}
.atrium-sub{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:#90e0ef;max-width:40ch;margin-top:1.5rem;line-height:1.65}

/* Masonry */
.masonry-section{padding:clamp(2rem,4vh,4rem) clamp(16px,4vw,48px)}
.masonry-grid{columns:4;column-gap:clamp(12px,2vw,20px);max-width:1200px;margin:0 auto}
.tile{break-inside:avoid;margin-bottom:clamp(12px,2vw,20px);background:linear-gradient(135deg,rgba(0,180,216,0.06),rgba(201,160,201,0.04));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:clamp(1rem,2vw,1.5rem);overflow:hidden}
.tile--text{min-height:auto}
.tile--botanical{display:flex;align-items:center;justify-content:center;min-height:200px}
.tile--gradient{min-height:120px;background:linear-gradient(135deg,rgba(0,180,216,0.15),rgba(201,160,201,0.1),rgba(224,122,122,0.08))}
.tile--data{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px}
.tile-heading{font-family:'Recursive',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.5vw,1.6rem);color:#caf0f8;margin-bottom:0.5rem}
.tile-text{color:#90e0ef;max-width:40ch}
.data-big{font-family:'Recursive',sans-serif;font-weight:800;font-size:clamp(2rem,4vw,3rem);color:#00b4d8}
.data-label{font-family:'Recursive',sans-serif;font-weight:400;font-size:0.8rem;color:#90e0ef;margin-top:0.3rem;letter-spacing:0.04em}

.fern-svg{width:120px;height:180px}
.orchid-svg{width:140px;height:140px}

/* Root Section */
.root-section{padding:clamp(4rem,10vh,10rem) clamp(16px,4vw,48px);background:linear-gradient(180deg,transparent,#050a12);text-align:center}
.root-content{max-width:50ch;margin:0 auto}
.root-text{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.4rem);color:#90e0ef;line-height:1.7;margin-bottom:2rem}
.root-stamp{font-family:'Recursive',sans-serif;font-weight:400;font-size:0.8rem;color:#00b4d8;letter-spacing:0.08em}

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

@media(max-width:1200px){.masonry-grid{columns:3}}
@media(max-width:768px){.masonry-grid{columns:2}}
@media(max-width:480px){.masonry-grid{columns:1}}