*{box-sizing:border-box}html{background:#252b19;color:#eeeade;font-family:Arial,Helvetica,sans-serif}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #eeeade;outline-offset:6px}header{position:fixed;inset:0 0 auto;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:28px 5%;background:linear-gradient(#252b19dd,transparent)}.brand{font-size:16px;letter-spacing:.27em}.nav{font-size:13px;letter-spacing:.07em;border-bottom:1px solid #807f72;padding:10px 0}.journey{height:220vh}.stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;background:#252b19}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 95% 0%,#898253,transparent 65%);opacity:var(--ambient,.02)}.sphere{position:absolute;width:min(80vw,940px);height:min(80vw,940px);right:-3%;top:50%;transform:translateY(-47%)}.copy{position:absolute;top:25%;left:9%;max-width:660px;width:70%;z-index:2}.eyebrow{font-size:12px;letter-spacing:.23em;text-transform:uppercase;color:#c9cdb5;margin:0 0 28px}.copy h1{font-size:clamp(56px,7.6vw,112px);line-height:.97;letter-spacing:-.065em;font-weight:400;margin:0}.copy p.description{max-width:290px;color:#d4d6c2;line-height:1.7;font-size:16px;margin:30px 0}.chapter{font-size:13px;color:#c6c6b6;letter-spacing:.05em;display:flex;gap:18px;margin-top:30px}.chapter span:first-child{color:#bec4a5}.bottom{position:absolute;bottom:36px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.scroll{font-size:12px;letter-spacing:.1em;color:#b7b9ab;line-height:1.8}.meters{display:flex;gap:28px}.meter{width:100px;font-size:12px;letter-spacing:.08em}.meter label{display:flex;justify-content:space-between;margin-bottom:12px}.track{height:2px;background:#66704a}.track i{display:block;background:#ded4ab;height:100%;width:0}.progress{position:absolute;bottom:0;left:0;height:2px;background:#d5c99f;width:0}.study-note{position:absolute;right:5%;top:115px;font-size:12px;color:#bfc5a7;letter-spacing:.06em}.end{padding:120px 9%;background:#e8e8dc;color:#15251e;display:grid;grid-template-columns:1fr 1fr;gap:70px}.end h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.055em;line-height:1.04;margin:0;font-weight:400}.end p{font-size:18px;line-height:1.65;max-width:450px}.end .eyebrow{color:#5c6658}.replay{background:transparent;border:0;border-bottom:1px solid #52604f;padding:16px 0;margin-top:12px}.footer{padding:28px 9%;font-size:12px;background:#e8e8dc;color:#596456;border-top:1px solid #bfc6b5;display:flex;justify-content:space-between;gap:20px}.motion{position:fixed;right:5%;bottom:110px;z-index:5;background:#132017dd;border:1px solid #414b3f;border-radius:30px;padding:10px 15px;font-size:12px}.motion[hidden]{display:none}
@media(max-width:700px){header{padding:20px 6%}.brand{font-size:14px}.nav{font-size:12px}.stage{min-height:660px}.copy{left:7%;top:20%;width:85%}.copy h1{font-size:62px}.copy p.description{font-size:15px;width:210px}.study-note{top:85px;font-size:11px;right:7%}.sphere{width:110vw;height:110vw;right:-25%;top:60%;opacity:1}.bottom{bottom:30px;left:7%;right:7%;gap:20px}.meters{gap:15px}.meter{width:65px;font-size:10px}.scroll{font-size:11px;max-width:105px}.end{padding:75px 7%;grid-template-columns:1fr;gap:25px}.footer{padding:25px 7%;font-size:11px}.eyebrow{margin-bottom:20px}.chapter{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh;min-height:660px}}

/* Headlines crossfade with scroll while keeping a stable text area. */
.copy h1{display:grid;min-height:2em}
.headline-frame{grid-area:1/1;opacity:0;will-change:opacity,transform}
.headline-frame:first-child{opacity:1}
@media(prefers-reduced-motion:reduce){.headline-frame{will-change:auto}}


/* Vector clipping keeps the silhouette smooth at every display density. */
.sphere{display:block;overflow:visible;shape-rendering:geometricPrecision}
@media(max-width:700px){.journey{height:200vh}.study-note{font-size:10px;letter-spacing:.035em}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh;min-height:660px}}

/* The model uses the previous sphere footprint, with a real lit surface. */
.moon-scene{pointer-events:none;isolation:isolate}
.moon-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.moon-scene[data-ready="true"] .moon-canvas{opacity:1}
.moon-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(var(--moon-brightness,.2))}
.moon-scene[data-ready="true"] .moon-poster{visibility:hidden}
.moon-halo{position:absolute;inset:4%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(233,217,169,.38) 20%,rgba(181,173,117,.12) 48%,transparent 70%);opacity:var(--moon-glow,.02);transform:scale(1.15)}
@media(max-width:700px){.moon-scene{width:100vw;height:100vw;right:-20%;top:76%}.copy p.description{line-height:1.55}.scroll{max-width:125px;letter-spacing:.07em}}


/* Moon I: keep the product clear of the headline on every screen. */
.moon-scene{width:65vw;height:90svh;max-width:1000px;right:-2%;top:50%;transform:translateY(-50%)}
.moon-halo{display:none}
.copy{width:46%;left:7%;top:27%}
.copy h1{font-size:clamp(54px,6.6vw,100px)}
.meter{width:110px;font-size:10px}
@media(max-width:700px){
 .stage{min-height:760px}.copy{top:15%;left:7%;width:86%}
 .copy h1{font-size:clamp(42px,11vw,62px)}
 .copy p.description{font-size:13px;line-height:1.5;margin:16px 0}
 .chapter{font-size:11px;margin-top:12px}
 .moon-scene{width:100%;height:48%;right:0;top:65%;max-width:none}
 .meter{width:75px;font-size:9px}.bottom{bottom:24px}
 .study-note{top:80px}
}
@media(prefers-reduced-motion:reduce){.journey{height:100svh;min-height:760px}}