:root{--paper:#F4F1EA;--ink:#141414;--mute:#5d5a54;--hair:#141414;--blue:#1F3FBF;--rule:rgba(20,20,20,.18)}
*{box-sizing:border-box}html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.02em;margin:0}
em{font-style:italic;color:var(--blue)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
a{color:inherit}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mast{position:fixed;inset:0 0 auto;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;justify-content:space-between;align-items:center;height:64px}.mast img{height:22px;width:auto;display:block}
.mast-link{font-size:15px;text-decoration:none;border-bottom:1px solid var(--ink)}.mast-link:hover{color:var(--blue);border-color:var(--blue)}
.folio{color:var(--mute);margin:0 0 28px;padding-top:14px;border-top:1px solid var(--hair);display:inline-block;min-width:260px}
.big{font-size:clamp(40px,6vw,88px);line-height:1}
.huge{font-size:clamp(48px,9vw,148px);line-height:.95}
/* pinned scenes */
.pin{position:relative;height:var(--len)}
.stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:64px}
.scene1{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;width:100%}
h1{font-size:clamp(40px,5.2vw,78px);line-height:1.02}
.lede{color:var(--mute);margin:24px 0 36px;font-size:19px}
.stages{list-style:none;padding:0;margin:0;display:flex;gap:22px;color:var(--mute)}
.stages li{position:relative;padding-top:10px;border-top:1px solid var(--rule)}.stages li.on{color:var(--ink);border-color:var(--ink)}
.sheet{margin:0;border:1px solid var(--ink);background:var(--paper);padding:18px 18px 12px}
.sheet-head{display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule)}.sheet-state{color:var(--blue)}
.sheet figcaption{color:var(--mute);font-size:10px;margin-top:10px;text-transform:none;letter-spacing:0}
/* mock: driven by --p (0..1) through stage classes s1..s4 */
.mock{position:relative;display:grid;gap:14px;font-family:Fraunces,serif;
 background-image:linear-gradient(rgba(31,63,191,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(31,63,191,.12) 1px,transparent 1px);background-size:20px 20px;transition:background-color .5s}
.mock>*,.m-col,.m-img{border:1px dashed var(--blue);transition:background-color .5s,border-color .5s,color .5s}
.m-nav{display:flex;gap:10px;align-items:center;height:30px;padding:0 10px}.m-nav i{display:block;height:6px;width:34px;border:1px solid var(--blue)}.m-nav .m-logo{width:54px;height:12px;margin-right:auto}
.m-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;padding:16px;min-height:150px}
.m-text{display:flex;flex-direction:column;justify-content:center;gap:9px;position:relative}
.ph{display:block;height:9px;border:1px solid var(--blue)}.l1{width:90%}.l2{width:70%}.l3{width:45%;margin-top:6px}
.m-img{position:relative;min-height:110px}.x::before,.x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--blue);transform:rotate(25deg)}.x::after{transform:rotate(-25deg)}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border:0!important}
.m-col{height:64px;padding:10px;display:flex;align-items:flex-end}.m-col .ph{width:60%}
.m-btn{height:34px;width:38%;display:flex;align-items:center;justify-content:center}
.real{display:none;margin:0}
.mock.s2 .ph,.mock.s2 .m-nav i{border-style:solid;border-color:var(--ink);background:var(--ink)}
.mock.s2>*,.mock.s2 .m-col,.mock.s2 .m-img{border-style:solid;border-color:var(--ink)}
.mock.s3{background-image:none}
.mock.s3 .ph{display:none}.mock.s3 .real{display:block}
.r-title{font-size:clamp(20px,2vw,28px);line-height:1.05}.r-sub{font-family:"Inter Tight",sans-serif;font-size:13px;color:var(--mute)}
.m-col b{font-weight:400;font-size:17px}
.mock.s4 .m-img{background:var(--ink);border-color:var(--ink)}.mock.s4 .x{display:none}
.mock.s4 .m-img::after{content:"";position:absolute;inset:18% 22%;border-radius:50%;background:var(--paper)}
.mock.s4 .m-btn{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.mock.s4 .m-btn b{font-family:"Inter Tight";font-size:13px;font-weight:500}
.mock.s4 .m-nav .m-logo{background:var(--ink)}
.mock.s4>*,.mock.s4 .m-col{border-color:var(--rule)}
.mock.s4 .m-row{border:0}
/* editorial */
.ed{padding:clamp(100px,14vw,180px) 0}
.spread{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:80px;border-top:1px solid var(--hair)}
.entry{padding:28px 32px 0 0;margin-right:32px;border-right:1px solid var(--rule)}.entry:last-child{border-right:0;margin-right:0}
.entry .n{color:var(--blue)}.entry h3{font-size:30px;line-height:1.1;margin:28px 0 14px}.entry p{color:var(--mute);margin:0;max-width:34ch}
.pull{font-family:Fraunces,serif;font-style:italic;font-size:clamp(26px,3vw,40px);line-height:1.2;margin:120px 0 0 auto;max-width:18em;padding-left:28px;border-left:2px solid var(--blue)}
.scene2{width:100%}.track{height:1px;background:var(--rule);margin:72px 0 0;position:relative}
.fill{position:absolute;left:0;top:-1px;height:3px;width:calc(var(--p,0)*100%);background:var(--blue)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{padding-top:28px;opacity:.3;transition:opacity .4s}.steps li.on{opacity:1}
.steps .mono{color:var(--blue)}.steps h3{font-size:clamp(28px,3vw,42px);margin:12px 0}.steps p{margin:0;color:var(--mute);max-width:32ch}
.three-stick{padding-top:0}#gl,.gl-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gl-fallback{display:none}
.scene3{position:relative;width:100%;pointer-events:none;align-self:flex-end;padding-bottom:9vh}
.three-cap{color:var(--blue);margin-top:24px}
.index{margin:72px 0 0;border-top:1px solid var(--hair)}
.index div{display:grid;grid-template-columns:1fr 2fr;padding:26px 0;border-bottom:1px solid var(--rule)}
.index dt{font-family:Fraunces,serif;font-size:28px}.index dd{margin:0;color:var(--mute);align-self:center}
.contact{padding:clamp(110px,15vw,200px) 0;background:var(--ink);color:var(--paper)}
.contact .folio{color:#a9a49a;border-color:var(--paper)}
.mail{display:inline-block;margin-top:56px;font-family:Fraunces,serif;font-size:clamp(26px,4vw,56px);text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:6px;transition:color .2s}
.mail:hover{color:#9fb0ff}
.foot{padding:26px 0;border-top:1px solid var(--rule)}.foot-in{display:flex;justify-content:space-between;align-items:center}.foot img{height:18px;width:auto}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){
 .scene1{grid-template-columns:1fr;gap:28px}.s1-copy .lede{margin:14px 0 18px}h1{font-size:clamp(34px,8.6vw,52px)}
 .spread,.steps{grid-template-columns:1fr}.entry{border-right:0;margin:0;padding:28px 0;border-bottom:1px solid var(--rule)}
 .pull{margin-top:64px}.index div{grid-template-columns:1fr;gap:6px}.mast-link{font-size:13px}.steps{gap:0}.steps li{padding-top:20px}
 .stick{align-items:flex-start;padding-top:88px}.scene3{align-self:flex-end}}
@media(max-width:520px){.wrap{padding:0 20px}.m-hero{min-height:110px;padding:10px}.m-img{min-height:80px}.stages{gap:12px}.folio{min-width:0}}
/* reduced motion: calm, unpinned, fully built */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
 .pin{height:auto}.stick{position:relative;height:auto;min-height:0;padding:120px 0 80px}
 .reveal{opacity:1;transform:none}.steps li{opacity:1}.fill{width:100%}
 #gl{display:none}.gl-fallback{display:block;position:relative;width:100%;max-width:840px;height:auto;margin:0 auto}.three-stick{display:block;padding:0}.scene3{padding:40px 0 0}}