/* Particle frontispieces share the reference site's scatter-and-gather language. */
.page-hero{min-height:530px;padding-block:82px;padding-inline-end:46%}
.page-hero h1{font-size:clamp(39px,4.3vw,62px)}
.page-hero p{max-width:630px;font-size:13px}
.particle-art{position:absolute;inset-block:10px;inset-inline-end:-34px;width:49%;isolation:isolate}
.particle-art:before{content:"";position:absolute;inset:12%;background:radial-gradient(ellipse,#92ef0009,transparent 67%);z-index:-1}
.page-particles{display:block;width:100%;height:100%;touch-action:pan-y;cursor:crosshair;outline-offset:-9px}
.particle-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;white-space:nowrap;font:8px/1.5 var(--font);letter-spacing:.14em;color:var(--dim);pointer-events:none}
.particle-status{width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #92ef0066;animation:particle-signal 4s ease-in-out infinite}
.motion-paused .particle-hint{opacity:.35}
/* Core icons are generated assets; their movement responds to the visitor. */
.designed-icon{position:relative;perspective:650px}
.card-symbol.designed-icon{width:96px;height:86px;margin:16px 0 4px -10px;overflow:visible}
.icon-body{position:relative;display:block;width:100%;height:100%;transform:translate3d(var(--icon-x,0px),var(--icon-y,0px),0) rotateY(var(--icon-tilt,0deg));transition:transform .7s cubic-bezier(.18,.8,.25,1);will-change:transform}
.icon-body img{display:block;width:100%;height:100%;object-fit:contain;animation:icon-drift 8s ease-in-out infinite;animation-delay:var(--phase,0s);filter:drop-shadow(0 6px 16px #92ef000e);transition:filter .6s}
.card:hover .icon-body img{filter:drop-shadow(0 7px 18px #92ef0024)}
.icon-mote{position:absolute;display:block;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0;pointer-events:none;animation:icon-dust 7s ease-in-out infinite;animation-delay:var(--phase,0s)}
.mote-a{left:22%;top:64%;--mote-x:9px;--mote-y:-29px}
.mote-b{right:21%;top:43%;--mote-x:-7px;--mote-y:-24px;animation-delay:calc(var(--phase,0s) - 3s);background:var(--green)}
.editorial-icon .icon-body{width:170px;height:170px}
.editorial-icon:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 95%,#92ef000b,transparent 55%);pointer-events:none}
.editorial-icon .icon-mote{width:2px;height:2px;left:44%;top:60%;--mote-y:-55px;--mote-x:20px}
.editorial-icon .mote-b{left:62%;top:68%;--mote-y:-70px;--mote-x:-16px}
.card:hover .editorial-icon .icon-body{transform:translate3d(var(--icon-x,0px),calc(var(--icon-y,0px) - 3px),0) rotateY(var(--icon-tilt,0deg))}
.motion-paused .icon-body{transform:none!important;transition:none!important}
@keyframes icon-drift{0%,100%{transform:translateY(0) rotate(-1deg)}40%{transform:translateY(-4px) rotate(1.2deg)}75%{transform:translateY(1px) rotate(-.6deg)}}
@keyframes icon-dust{0%,15%{opacity:0;transform:translate(0,0) scale(.5)}35%{opacity:.7}65%,100%{opacity:0;transform:translate(var(--mote-x),var(--mote-y)) scale(.3)}}
@keyframes particle-signal{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:1200px){.page-hero{padding-inline-end:44%;min-height:480px}.page-hero h1{font-size:clamp(37px,4.4vw,53px)}.particle-art{width:48%;inset-inline-end:-20px}}
@media(max-width:1020px){.page-hero{padding-inline-end:43%;min-height:430px;padding-block:62px}.page-hero h1{font-size:40px}.page-hero p{font-size:12px}.particle-art{width:47%;inset-inline-end:-18px}.particle-hint{font-size:7px;letter-spacing:.08em}.card-symbol.designed-icon{width:88px;height:78px}}
@media(max-width:700px){.page-hero{padding:46px 0 20px;min-height:0}.page-hero h1{font-size:clamp(33px,8vw,48px)}.page-hero p{font-size:12px;max-width:none}.particle-art{position:relative;inset:auto;width:100%;height:280px;margin:9px auto 0;max-width:400px;flex:none}.particle-hint{bottom:0;font-size:7px;letter-spacing:.12em}.page-particles{height:100%}.card-symbol.designed-icon{width:95px;height:85px;margin-top:13px;margin-bottom:3px}.editorial-icon .icon-body{width:185px;height:185px}.page-hero:before{inset-inline:-10px}.hero .card-symbol.designed-icon{width:95px;height:85px}}
@media(max-width:360px){.particle-art{height:245px}}
@media(prefers-reduced-motion:reduce){.icon-body{transform:none!important;transition:none!important}.icon-body img,.icon-mote,.particle-status{animation:none!important}.icon-mote{display:none}}