.exploration-intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin:6rem 0 2rem; }
.exploration-intro h3,.study-heading { font-size:clamp(2rem,4vw,3.5rem); margin:.5rem 0; font-weight:300; }
.exploration-intro a { color:var(--sulphur); text-underline-offset:5px; }
.exploration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.systems-summary { font-size:.9rem; line-height:1.5; font-weight:300; margin:0 0 1rem; }
#panel-systems p + p { margin-top:1rem; }
.exploration-card { color:inherit; text-decoration:none; display:block; }
.exploration-card figure { margin:0; overflow:hidden; }
.exploration-card img { display:block; width:100%; aspect-ratio:1.5; object-fit:cover; transition:transform 600ms cubic-bezier(.2,.7,.2,1); }
.exploration-card:hover img,.exploration-card:focus-visible img { transform:scale(1.035); }
.exploration-card figcaption { padding:.8rem 0; display:flex; justify-content:space-between; gap:1rem; font-size:1rem; }
.exploration-card figcaption span { color:#b7bab0; font-size:.8rem; }
.look-study,.timing-study { margin:5rem auto 0; width:100%; max-width:1000px; scroll-margin-top:100px; }
.study-note { font-size:.85rem; line-height:1.5; max-width:65ch; }
.look-frame { position:relative; aspect-ratio:1.5; overflow:hidden; margin:1.5rem 0 1rem; }
.look-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.look-frame .look-final { clip-path:inset(0 0 0 var(--split,50%)); }
.look-frame::after { content:'';position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#edece5;pointer-events:none; }
.look-control { width:100%; min-height:44px; accent-color:#d9ed50; cursor:ew-resize; }
.look-labels { display:flex; justify-content:space-between; }
.timing-frame { position:relative; aspect-ratio:1.5; overflow:hidden; background:#171917; }
.timing-frame img { width:100%;height:100%;object-fit:cover;display:block; }
.timing-controls {display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin:1rem 0;}
.timing-controls button {min-height:44px;padding:.6rem 1rem;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;cursor:pointer;}
.timing-controls button[aria-pressed=true] {background:#171917;color:#edece5;}
.timing-caption {font-size:.8rem;letter-spacing:.08em;}
.no-js .timing-controls,.no-js .look-control,.no-js label[for="look-range"] {display:none;}
.project-dialog[open] { animation:dialog-enter 240ms cubic-bezier(.165,.84,.44,1); }
@keyframes dialog-enter {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.exploration-intro{display:block;margin-top:4rem}.exploration-grid{grid-template-columns:1fr;gap:1.5rem}.look-study,.timing-study{margin-top:3rem}}
@media(prefers-reduced-motion:reduce){.exploration-card img{transition:none}.exploration-card:hover img{transform:none}.project-dialog[open]{animation:none}}