.bubble-gallery{margin:80px -5vw -90px;padding:75px 5vw 35px;background:#cad5c1;position:relative;isolation:isolate;overflow:hidden;color:#2a402c}.bubble-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;position:relative;z-index:2}.bubble-heading .mono{font-size:9px;color:#53694c}.bubble-heading h2{font-size:clamp(45px,5.5vw,88px);margin-top:20px;line-height:1}.bubble-tools{text-align:right}.bubble-tools p{font-size:12px;color:#53694c;margin-bottom:15px}.bubble-tools button{border:1px solid #7c9271;border-radius:30px;padding:10px 17px;font-size:11px;background:#e5ebdc}.bubble-space{position:relative;padding:70px 15px 50px;perspective:1100px}.bubble-orbits{position:absolute;inset:10% -20%;border:1px solid #526c4333;border-radius:50%;transform:rotate(-15deg);pointer-events:none;box-shadow:0 0 0 50px #526c4305,0 0 0 100px #526c4304}.bubble-orbits::before{content:'';position:absolute;inset:-20% 18%;border:1px solid #526c4322;border-radius:50%;transform:rotate(50deg)}.bubble-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px;position:relative}.bubble-slot{display:flex;justify-content:center;align-items:center;min-width:0;animation:bubble-drift calc(15s + var(--i)*2s) ease-in-out infinite;animation-delay:calc(var(--i)*-3s);will-change:transform}.project-bubble{position:relative;width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;overflow:hidden;padding:0;border:1px solid #ffffffb0;box-shadow:inset 0 0 35px #fff6,0 20px 40px #253b2b26,0 0 0 7px #ffffff17;isolation:isolate;transform:translateZ(0);transition:box-shadow .3s,scale .3s;background:#3d5440;color:#fff;text-align:center}.bubble-slot:nth-child(2) .project-bubble{max-width:265px}.bubble-slot:nth-child(3) .project-bubble{max-width:240px}.bubble-slot:nth-child(4) .project-bubble{max-width:245px}.bubble-slot:nth-child(6) .project-bubble{max-width:255px}.bubble-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-3;transition:transform .8s;animation:bubble-image-orbit 22s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-4s)}.shinde-original .bubble-image{background-size:260% auto;background-position:5% 4%}.bubble-gloss{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 25% 12%,#ffffff60,transparent 40%),linear-gradient(0deg,#0c201bf2,transparent 78%);z-index:-2;box-shadow:inset -12px -15px 25px #14261666,inset 4px 5px 15px #ffffff88}.bubble-gloss::before{content:'';position:absolute;inset:5%;border-radius:50%;border-top:1px solid #ffffffb0;transform:rotate(-30deg)}.bubble-name{position:absolute;left:12%;right:12%;bottom:24%;font:clamp(18px,2vw,30px)/1.04 Georgia,serif;letter-spacing:-.035em;text-shadow:0 2px 10px #0008}.bubble-name small{display:block;font:7px/1.5 var(--mono);letter-spacing:.05em;margin-top:12px;color:#e0e9d8}.bubble-number{position:absolute;top:15%;left:0;right:0;font:9px var(--mono);text-shadow:0 1px 8px #000}.bubble-open{position:absolute;bottom:8%;left:calc(50% - 14px);width:28px;height:28px;border:1px solid #e3ecd180;border-radius:50%;font-size:17px}.project-bubble:hover,.project-bubble:focus-visible{scale:1.055;box-shadow:0 18px 45px #253b2b45,0 0 0 9px #ffffff40;outline:2px solid #2f5132;outline-offset:8px}.bubble-space:hover .bubble-slot,.bubble-space:hover .bubble-image,.bubble-space:focus-within .bubble-slot,.bubble-space:focus-within .bubble-image,.bubbles-paused .bubble-slot,.bubbles-paused .bubble-image,.motion-paused .bubble-slot,.motion-paused .bubble-image,.dialog-open .bubble-slot,.dialog-open .bubble-image,.bubble-gallery:not(.in-view) .bubble-slot,.bubble-gallery:not(.in-view) .bubble-image{animation-play-state:paused}.bubble-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #7c927150;padding-top:25px}.bubble-footer .mono{font-size:8px;color:#4f6748}.bubble-footer .text-link{color:#2c462f;border-color:#809473;font-size:12px}.bubble-footer .text-link span{color:#2c462f}.shinde-original-view{grid-column:1/-1;margin:0 0 20px}.shinde-interior{width:100%;aspect-ratio:1.45;background-image:url(assets/projects/page-30.webp);background-size:230% auto;background-position:5% 3%;border-radius:6px}.shinde-original-view figcaption{font:10px var(--mono);color:#b7c4ab;margin-top:10px}
.shinde-original-view .shinde-interior{aspect-ratio:1.15;background-size:290% auto;background-position:6% 3%}
@keyframes bubble-drift{0%,100%{transform:translate3d(-8px,6px,0) rotate(-2deg)}25%{transform:translate3d(10px,-13px,15px) rotate(1deg)}50%{transform:translate3d(16px,5px,0) rotate(2deg)}75%{transform:translate3d(-6px,15px,-10px) rotate(-1deg)}}@keyframes bubble-image-orbit{from{transform:scale(1.04) rotate(-3deg)}to{transform:scale(1.14) rotate(3deg)}}
@media(min-width:1900px){.bubble-gallery{margin-bottom:-140px}.project-bubble{max-width:420px}.bubble-slot:nth-child(n) .project-bubble{max-width:400px}.bubble-grid{gap:65px}.bubble-space{padding-block:100px}.bubble-name small{font-size:10px}}
@media(max-width:900px){.bubble-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}.bubble-name{font-size:24px}.bubble-heading{align-items:start}.bubble-tools p{max-width:150px}}
@media(max-width:700px){.bubble-gallery{margin:55px -22px -60px;padding:45px 22px 30px}.bubble-heading{display:block}.bubble-heading h2{font-size:46px}.bubble-tools{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.bubble-tools p{font-size:10px;margin:0}.bubble-tools button{font-size:10px;padding:8px 12px}.bubble-space{padding:42px 0 35px}.bubble-grid{gap:30px 15px}.bubble-name{font-size:17px;left:9%;right:9%;bottom:23%}.bubble-name small{font-size:5px;margin-top:6px}.bubble-number{font-size:7px;top:13%}.bubble-open{width:21px;height:21px;left:calc(50% - 10px);font-size:13px;bottom:6%}.bubble-footer{align-items:start;flex-direction:column;gap:8px}.project-bubble{box-shadow:0 10px 20px #253b2b20,0 0 0 4px #fff2}.shinde-interior{aspect-ratio:1.1;background-size:250% auto}.bubble-slot{animation-name:bubble-drift-mobile}}
@keyframes bubble-drift-mobile{0%,100%{transform:translate(-3px,3px) rotate(-1deg)}50%{transform:translate(3px,-5px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.bubble-slot,.bubble-image{animation:none}.project-bubble{transition:none}}
/* Architecture gallery is now a standalone chapter immediately after the opening. */
main > .bubble-gallery{margin:0}
