/* The field follows the existing twelve-column, 24px-gutter homepage grid. */
.observation-field{--field-height:72px;--grid-step:calc((100% + 24px) / 12);position:relative;height:var(--field-height);margin:0 0 12px;overflow:hidden;isolation:isolate;contain:paint;pointer-events:none;mask-image:radial-gradient(ellipse 70% 100% at 55% 50%,#000 36%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 70% 100% at 55% 50%,#000 36%,transparent 96%)}
.observation-wash,.observation-grid{position:absolute;inset:0}
.observation-wash{background:radial-gradient(ellipse 27% 90% at 67% 48%,rgba(120,60,246,.065),transparent 94%),radial-gradient(ellipse 18% 70% at 28% 57%,rgba(190,155,171,.028),transparent 90%)}
.observation-grid{background-image:linear-gradient(rgba(140,140,132,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,132,.045) 1px,transparent 1px);background-size:var(--grid-step) 24px}
.observation-frame{position:absolute;border:1px solid rgba(120,60,246,.24);opacity:.7}
/* Main frame follows the right opportunity column, including its existing 48px gap. */
.frame-a{left:calc(50% + 24px);top:12%;width:calc(100% / 3 - 16px);height:70%;--dx:4px;--dy:-2px;--period:29s;--phase:-9s}
.frame-b{left:calc(100% / 6 + 4px);top:42%;width:calc(100% / 6 - 20px);height:36%;border-color:rgba(140,140,132,.14);--dx:-3px;--dy:2px;--period:37s;--phase:-21s}
.frame-c{left:calc(75% + 30px);top:44%;width:calc(100% / 6 - 20px);height:40%;border-color:rgba(120,60,246,.13);--dx:3px;--dy:2px;--period:33s;--phase:-16s}
.frame-d{left:calc(100% * 5 / 12 + 10px);top:24%;width:calc(100% / 12 - 22px);height:22%;border-color:rgba(140,140,132,.12);--dx:-2px;--dy:-2px;--period:43s;--phase:-27s}
.observation-scan{position:absolute;left:8%;right:2%;top:0;height:1px;background:linear-gradient(90deg,transparent 15%,rgba(120,60,246,.10) 67%,transparent);opacity:.45;transform:translateY(calc(var(--field-height) / 2))}
@media(prefers-reduced-motion:no-preference){
 .observation-frame{animation:observation-drift var(--period) ease-in-out var(--phase) infinite alternate;animation-play-state:paused}
 .observation-scan{animation:observation-sweep 16s linear -6s infinite;animation-play-state:paused}
 .observation-field[data-running=true] .observation-frame,.observation-field[data-running=true] .observation-scan{animation-play-state:running}
}
@keyframes observation-drift{from{transform:translate(0,0);opacity:.5}to{transform:translate(var(--dx),var(--dy));opacity:.85}}
@keyframes observation-sweep{0%{transform:translateY(-2px);opacity:0}10%,90%{opacity:.45}100%{transform:translateY(calc(var(--field-height) + 2px));opacity:0}}
@media(max-width:650px){
 .observation-field{--field-height:48px;--grid-step:calc((100% + 16px) / 4);margin-bottom:12px}
 .frame-a{left:calc(25% + 4px);top:12%;width:calc(50% - 8px);height:70%;--dx:2px;--dy:-1px}
 .frame-b{left:calc(50% + 8px);top:44%;width:calc(25% - 12px);height:38%;--dx:-2px;--dy:1px}
 .frame-c,.frame-d{display:none}
 .observation-scan{animation-duration:18s}
}
/* One sample only. Artwork keeps its size, crop and pixels; existing text stays readable. */
.mag-cards .observed-entry h3{position:relative}
.mag-cards .observed-entry h3::before{content:"";position:absolute;left:-10px;top:.52em;width:4px;height:4px;border-radius:50%;background:#783CF6;opacity:0;pointer-events:none}
.mag-cards .observed-entry h3 a,.mag-cards .observed-entry h3 a:hover{color:#161614;text-decoration:none}
.mag-cards .observed-entry .image-link img,.mag-cards .observed-entry .image-link:hover img{transform:none;transition:none}
.mag-cards .observed-entry .image-link:hover:not(:focus-visible){outline:none}
.mag-cards .observed-entry:has(.image-link:focus-visible,h3 a:focus-visible) h3::before{opacity:1}
.mag-cards .observed-entry:has(.image-link:focus-visible,h3 a:focus-visible) .image-credit{color:#161614}
@media(hover:hover) and (pointer:fine){
 .mag-cards .observed-entry:has(.image-link:hover,h3 a:hover) h3::before{opacity:1}
 .mag-cards .observed-entry:has(.image-link:hover,h3 a:hover) .image-credit{color:#161614}
}
@media(prefers-reduced-motion:no-preference){
 .mag-cards .observed-entry h3::before{transition:opacity 280ms ease}
 .mag-cards .observed-entry .image-credit{transition:color 280ms ease}
}
@media(hover:none){.mag-cards .observed-entry .image-credit{opacity:1}}
@media(prefers-reduced-motion:reduce){.observation-frame,.observation-scan{animation:none;transition:none}}

/* Reusable reading cue. Static end state is the default, including without JavaScript. */
.reading-line{--reading-length:72px;position:relative;display:block;width:var(--reading-length);height:4px;contain:paint;pointer-events:none}
.reading-line__stroke{position:absolute;left:2px;right:2px;top:1.5px;height:1px;background:rgba(120,60,246,.2);transform-origin:left center;transform:scaleX(1)}
.reading-line__dot{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:rgba(120,60,246,.55);transform:translateX(calc(var(--reading-length) - 4px))}
.footer-brand{position:relative}
.footer-brand>.reading-line{position:absolute;left:0;top:-16px}
@media(prefers-reduced-motion:no-preference){
 .reading-line[data-state=playing] .reading-line__stroke{animation:reading-reveal 2200ms cubic-bezier(.22,.61,.36,1) 1 both}
 .reading-line[data-state=playing] .reading-line__dot{animation:reading-point 2200ms cubic-bezier(.22,.61,.36,1) 1 both}
}
@keyframes reading-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes reading-point{from{transform:translateX(0)}to{transform:translateX(calc(var(--reading-length) - 4px))}}
@media(prefers-reduced-motion:reduce){.reading-line__stroke,.reading-line__dot{animation:none}}