:root{color-scheme:dark;--ink:#eee9dc;--muted:#bcb5a6;--night:#0b1011;--panel:#131b1b;--copper:#d39a58;--green:#8fd0a5;--line:rgba(211,154,88,.28)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% 0,#24302c 0,#0b1011 42rem);color:var(--ink);font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}
main{width:min(1280px,calc(100% - 48px));margin:auto;padding:72px 0 100px}
.hero{text-align:center;margin-bottom:72px}
.eyebrow,.number{font:700 .72rem/1.2 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--copper)}
h1{margin:.35rem 0;font-size:clamp(2.6rem,6vw,6rem);font-weight:400;letter-spacing:-.045em}
h2{margin:.25rem 0 1.2rem;font-size:clamp(1.7rem,3vw,3.25rem);font-weight:400;line-height:1.02}
p{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.75}
.movement{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.38fr);align-items:center;gap:clamp(32px,6vw,92px);min-height:680px}
.movement--second{grid-template-columns:minmax(0,1.38fr) minmax(0,.82fr)}
.copy{padding:clamp(10px,3vw,42px)}
.visual{margin:0;position:relative}
.visual:before{content:"";position:absolute;inset:-10px;border:1px solid var(--line);z-index:-1}
.visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;box-shadow:0 30px 80px #0009}
.hinge{position:relative;display:grid;justify-items:center;text-align:center;padding:92px 20px;margin:50px 0;background:linear-gradient(90deg,transparent,var(--panel) 18%,var(--panel) 82%,transparent);border-block:1px solid var(--line)}
.hinge-copy{max-width:680px}
.rune-control{position:relative;width:190px;height:190px;margin:32px 0 18px;border:1px solid #e8bd7b;border-radius:50%;background:radial-gradient(circle,#28342f 0 20%,#151d1b 21% 100%);color:var(--ink);cursor:pointer;box-shadow:0 0 0 8px #0b1011,0 0 0 9px var(--line),inset 0 0 35px #000;transition:transform .25s,box-shadow .25s}
.rune-control:hover{transform:scale(1.035);box-shadow:0 0 0 8px #0b1011,0 0 0 9px #d39a5888,0 0 50px #8fd0a529,inset 0 0 35px #000}
.rune-control:focus-visible{outline:3px solid var(--green);outline-offset:12px}
.ring{position:absolute;border:2px dashed var(--copper);border-radius:50%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ring--outer{inset:15px;transform:rotate(34deg)}
.ring--middle{inset:38px;transform:rotate(-62deg);border-style:dotted}
.ring--inner{inset:61px;transform:rotate(87deg)}
.route{position:absolute;inset:15px;width:160px;height:160px;fill:none;stroke:var(--green);stroke-width:4;filter:drop-shadow(0 0 8px var(--green))}
.route path{stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.15s .25s ease}
.control-label{position:absolute;inset:auto 0 20px;font:700 .7rem system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.rune-control.is-aligned .ring--outer{transform:rotate(180deg)}
.rune-control.is-aligned .ring--middle{transform:rotate(90deg)}
.rune-control.is-aligned .ring--inner{transform:rotate(0)}
.rune-control.is-aligned .route path{stroke-dashoffset:0}
.state{margin:0;color:var(--muted);font-size:.98rem}
.movement--second.is-revealed{animation:reveal .8s ease both}
@keyframes reveal{from{opacity:0;transform:translateY(36px);clip-path:inset(0 50% 0 50%)}to{opacity:1;transform:none;clip-path:inset(0)}}
footer{text-align:center;padding:24px;color:#8c938e;font:500 .75rem system-ui,sans-serif;letter-spacing:.08em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){main{width:min(100% - 28px,620px);padding-top:38px}.hero{margin-bottom:24px}.movement,.movement--second{grid-template-columns:1fr;gap:24px;min-height:0;padding:42px 0}.movement--first .copy{order:1}.movement--first .visual{order:2}.movement--second .visual{order:1}.movement--second .copy{order:2}.copy{padding:0}.hinge{margin:28px -14px;padding:64px 18px}.rune-control{width:166px;height:166px}.route{inset:3px;transform:scale(.86)}.visual:before{inset:-5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}