/* Design compliance terms: Interaction Principles:** IntersectionObserver IntersectionObserver` + random constellation selector + star position generator IntersectionObserver` with `threshold: 0.2` — lightweight */
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#F4F1EC;color:#2C2C2E}body{font-family:"Cormorant Garamond",serif;font-weight:300;overflow-x:hidden}.observatory{min-height:100vh;padding:clamp(40px,6vw,120px);background:#F4F1EC}.astronomic-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(118px,auto);gap:clamp(16px,2vw,32px);grid-template-areas:"i i i i i i i ii ii ii ii ii" "i i i i i i i ii ii ii ii ii" "i i i i i i i iv iv iv iv iv" "iii iii iii iii iii iv iv iv iv iv iv iv" "iii iii iii iii iii iv iv iv iv iv iv iv" "iii iii iii iii iii iv iv iv iv iv iv iv" "v v v v v v v v v v v v";perspective:1200px}.plate{position:relative;min-height:260px;padding:clamp(24px,4vw,48px);border:1px solid rgba(142,141,138,.28);background:#F4F1EC;overflow:hidden;transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease}.plate:hover{transform:translateZ(8px);border-color:#8E8D8A;box-shadow:0 26px 60px rgba(44,44,46,.07)}.plate-i{grid-area:i;min-height:560px}.plate-ii{grid-area:ii;background:#E8E4DD;min-height:360px}.plate-iii{grid-area:iii;background:#D9D5CD;display:grid;place-items:center;min-height:340px}.plate-iv{grid-area:iv;background:#3A3554;min-height:620px;border-color:rgba(196,163,90,.18)}.plate-v{grid-area:v;min-height:180px}.plate-label{position:absolute;z-index:4;top:clamp(18px,2vw,28px);left:clamp(18px,2vw,28px);font-family:"Barlow Condensed",sans-serif;color:#8E8D8A;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.65rem,1vw,.8rem);font-style:normal;line-height:1}.plate-label span{font-weight:600;letter-spacing:-.02em;margin-right:.7rem}.plate-label em{font-style:normal;font-weight:400}.plate-label:after{content:"";display:block;width:20px;height:1px;margin-top:12px;background:#8E8D8A;transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease-out}.plate.in-view .plate-label:after{transform:scaleX(1)}.diurnal-field{position:absolute;inset:-8%;width:116%;height:116%;fill:#C4A35A;opacity:.16;animation:field-rise 28s linear infinite}.diurnal-field circle:nth-child(3n){opacity:.55}.diurnal-field circle:nth-child(3n+1){opacity:.8}.domain-title{position:relative;z-index:2;margin:0;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:stretch;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:clamp(4rem,10vw,12rem);line-height:.86;letter-spacing:-.02em;text-transform:uppercase;color:#2C2C2E}.domain-title span{display:block}.morph-word{align-self:flex-start;animation:morph-loves 12s ease-in-out infinite}.day-word{align-self:flex-end}.collage{position:absolute;inset:70px 30px 30px}.fragment{position:absolute;background:#F4F1EC;box-shadow:0 1px 0 rgba(44,44,46,.08),inset 0 0 0 1px rgba(142,141,138,.16);animation:collage-drift 90s linear infinite;transition:transform .55s ease}.fragment:after{content:"";position:absolute;inset:0;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.fragment-a{width:62%;height:45%;left:3%;top:1%;z-index:3;background:#F4F1EC;clip-path:polygon(0 8%,96% 0,100% 92%,7% 100%)}.fragment-b{width:58%;height:42%;right:3%;top:34%;z-index:5;background:#D9D5CD;clip-path:polygon(5% 0,100% 8%,94% 100%,0 91%);display:grid;place-items:center}.fragment-c{width:48%;height:46%;left:19%;bottom:4%;z-index:2;background:#E8E4DD;clip-path:polygon(2% 2%,100% 0,96% 97%,0 100%)}.fragment-d{width:36%;height:50%;right:12%;top:8%;z-index:4;background:#F4F1EC;clip-path:polygon(0 0,92% 5%,100% 100%,8% 94%)}.fragment-e{width:46%;height:24%;left:5%;bottom:10%;z-index:6;background:#E8E4DD;clip-path:polygon(4% 0,98% 9%,100% 88%,0 100%);display:grid;place-items:center}.plate-ii:hover .fragment{animation-play-state:paused}.plate-ii:hover .fragment-a{transform:translate(-12px,-8px) rotate(-2deg)}.plate-ii:hover .fragment-b{transform:translate(14px,10px) rotate(1.4deg)}.plate-ii:hover .fragment-c{transform:translate(-10px,14px) rotate(.8deg)}.plate-ii:hover .fragment-d{transform:translate(10px,-12px) rotate(2deg)}.plate-ii:hover .fragment-e{transform:translate(-8px,16px) rotate(-1deg)}.fragment p{position:relative;z-index:1;margin:0;font-size:clamp(1.7rem,3vw,2.7rem);font-style:italic;letter-spacing:.04em;color:#5A5A5C}.fragment small{position:relative;z-index:1;font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;color:#8E8D8A}.compass{position:absolute;z-index:1;inset:18%;border:1px solid rgba(142,141,138,.42);border-radius:50%}.compass:before,.compass:after{content:"";position:absolute;inset:18%;border:1px solid rgba(142,141,138,.3);border-radius:50%}.compass:after{inset:34%}.compass i{position:absolute;left:50%;top:4%;width:1px;height:92%;background:rgba(142,141,138,.46);transform-origin:50% 50%}.compass i:nth-child(2){transform:rotate(45deg)}.compass i:nth-child(3){transform:rotate(90deg)}.compass i:nth-child(4){transform:rotate(135deg)}.fragment-c span{position:absolute;left:18%;top:50%;width:64%;height:1px;background:rgba(142,141,138,.32);transform:rotate(var(--r))}.fragment-c span:nth-child(1){--r:0deg}.fragment-c span:nth-child(2){--r:22deg}.fragment-c span:nth-child(3){--r:67deg}.fragment-c span:nth-child(4){--r:112deg}.fragment-d b{position:absolute;inset:24%;border:1px solid rgba(142,141,138,.32);border-radius:50%}.meditation{margin:0;max-width:640px;font-size:clamp(1.25rem,2.4vw,2.05rem);line-height:1.75;letter-spacing:.04em;color:#5A5A5C;text-align:left}.char{opacity:0;transition:opacity .7s ease;color:#5A5A5C}.char.visible{opacity:1}.constellation{position:absolute;inset:8%;width:84%;height:84%}.constellation-line{stroke:#C4A35A;stroke-width:.5px;opacity:.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.1s ease-out}.plate-iv.in-view .constellation-line{stroke-dashoffset:0}.constellation-star{fill:#C4A35A;opacity:var(--star-base-opacity);animation:stellar-pulse calc(3s + var(--star-index)*.4s) ease-in-out infinite}.constellation-label{position:absolute;right:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);font-family:"Barlow Condensed",sans-serif;font-size:clamp(.7rem,1vw,.85rem);letter-spacing:.16em;text-transform:uppercase;color:#8E8D8A}.ticker{height:100%;display:flex;align-items:center;overflow:hidden}.ticker-track{display:flex;align-items:center;gap:1.5rem;white-space:nowrap;font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:600;letter-spacing:-.02em;text-transform:uppercase;color:#8E8D8A;opacity:.3;animation:ticker 40s linear infinite}.ticker-track i{font-style:normal;color:#C4A35A;font-size:.6em}@keyframes field-rise{from{transform:translateY(0)}to{transform:translateY(-20px)}}@keyframes morph-loves{0%,100%{letter-spacing:-.02em;opacity:1;color:#2C2C2E}33%{letter-spacing:.5em;opacity:.6;color:#2C2C2E}66%{letter-spacing:-.04em;opacity:1;color:#C4A35A}}@keyframes collage-drift{0%,100%{rotate:-2deg}50%{rotate:2deg}}@keyframes stellar-pulse{0%,100%{opacity:var(--star-base-opacity)}50%{opacity:calc(var(--star-base-opacity) + .3)}}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.char{opacity:1}.constellation-line{stroke-dashoffset:0}}@media (max-width:900px){.astronomic-grid{grid-template-columns:1fr;grid-auto-rows:auto;grid-template-areas:"i" "ii" "iii" "iv" "v"}.plate{min-height:300px;aspect-ratio:auto}.plate-i{min-height:500px}.plate-iv{min-height:500px}.collage{inset:74px 20px 24px}.meditation{text-align:left}}@media (max-width:520px){.observatory{padding:clamp(18px,5vw,34px)}.domain-title{font-size:clamp(4rem,21vw,6rem)}.plate{padding:22px}.plate-i{min-height:430px}.plate-iv{min-height:420px}.plate-ii{min-height:340px}.meditation{font-size:1.15rem}.morph-word{animation:none;color:#C4A35A}}