@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--ink:#141411;--paper:#f2eee7;--warm:#caa36a;--gutter:clamp(22px,5vw,84px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:30;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.topbar{position:fixed;top:0;left:0;right:0;height:76px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;z-index:25;border-bottom:1px solid rgba(242,238,231,.12);background:linear-gradient(180deg,rgba(20,20,17,.92),rgba(20,20,17,0))}.brand{color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}.brand-mark{font-family:Georgia,serif;font-size:29px;line-height:1;color:var(--warm);transform:rotate(45deg);display:inline-block}.topbar-meta{display:flex;align-items:center;gap:14px;font:10px 'DM Mono',monospace;letter-spacing:.12em;color:rgba(242,238,231,.56)}.meta-rule{width:54px;height:1px;background:rgba(242,238,231,.3)}
.exploder{height:800vh;position:relative;background:var(--ink)}.exploder-sticky{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;background:radial-gradient(circle at 66% 48%,#2a2822 0,#171714 38%,#141411 74%)}.intro-copy{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(32vw,430px);z-index:6;transition:opacity 1s,transform 1.2s cubic-bezier(.16,.78,.2,1)}.intro-copy h1{font:clamp(48px,6.5vw,96px)/.94 'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.045em;margin:0 0 28px}.intro-copy h1 em,.outro h2 em{font-style:italic;color:var(--warm)}.eyebrow,.card-step{font:10px 'DM Mono',monospace;letter-spacing:.19em;text-transform:uppercase;color:var(--warm);margin:0 0 22px}.intro-lede{max-width:380px;font-size:15px;line-height:1.75;color:rgba(242,238,231,.7);margin:0}.scroll-cue{margin-top:50px;display:flex;gap:12px;align-items:center;font:10px 'DM Mono',monospace;letter-spacing:.16em;color:rgba(242,238,231,.55)}.scroll-line{width:40px;height:1px;background:var(--warm);position:relative}.scroll-line:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--warm);position:absolute;right:0;top:-2px}
.composition-wrap{position:absolute;left:50%;top:50%;height:min(76svh,760px);width:auto;max-width:52vw;transform:translate(-8%,-50%) rotate(2.2deg);filter:drop-shadow(0 40px 28px rgba(0,0,0,.55));z-index:2;transition:filter 1.2s}.composition{display:block;height:100%;width:auto;max-width:100%}.composition-shadow{position:absolute;inset:10% 2% -8%;background:#000;filter:blur(35px);opacity:.7;z-index:-1}.hero-dim{position:absolute;inset:0;background:#070706;opacity:0;transition:opacity 1.2s;pointer-events:none}.float-label{position:absolute;font:10px 'DM Mono',monospace;letter-spacing:.16em;color:var(--warm);line-height:1.5}.float-label-a{right:-25px;top:12%;writing-mode:vertical-rl}.float-label-b{bottom:-30px;left:10%;color:rgba(242,238,231,.5)}
.active-panel{position:absolute;inset:0;z-index:8;pointer-events:none}.floating-art{position:absolute;left:var(--origin-x);top:var(--origin-y);width:var(--origin-width);transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:0;filter:drop-shadow(0 22px 18px rgba(0,0,0,.45));transition:left 1.45s cubic-bezier(.16,.78,.2,1),top 1.45s cubic-bezier(.16,.78,.2,1),width 1.45s cubic-bezier(.16,.78,.2,1),transform 1.45s cubic-bezier(.16,.78,.2,1),opacity .9s,filter 1.45s}.floating-art img{display:block;width:100%;height:auto}.floating-art.is-active{left:50%;top:50%;width:var(--active-width);transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;filter:drop-shadow(0 35px 24px rgba(0,0,0,.55))}.floating-art.was-active{left:50%;top:50%;width:var(--active-width);transform:translate(-50%,-50%) scale(.78) rotate(4deg);opacity:0}
.explanation-card{position:absolute;right:var(--gutter);top:50%;width:min(28vw,370px);padding:30px 30px 28px;background:#f2eee7;color:#141411;border:1px solid rgba(242,238,231,.9);box-shadow:0 24px 70px rgba(0,0,0,.36);z-index:10;opacity:0;transform:translateY(-38%) translateX(45px);transition:opacity 1.05s,transform 1.25s cubic-bezier(.16,.78,.2,1),background .4s,color .4s}.explanation-card[data-theme="gold"]{background:#caa36a;color:#141411;border-color:#e1c18d}.explanation-card[data-theme="charcoal"]{background:#29271f;color:#f2eee7;border-color:#60533c}.explanation-card.is-visible{opacity:1;transform:translateY(-50%) translateX(0)}.explanation-card .card-step{color:currentColor;opacity:.5;margin-bottom:24px}.explanation-card h2{font:clamp(38px,4vw,64px)/.94 'Playfair Display',Georgia,serif;letter-spacing:-.05em;font-weight:500;margin:0 0 22px}.explanation-card h2 em{font-style:italic;color:currentColor}.card-copy{font-size:14px;line-height:1.7;color:currentColor;opacity:.72;margin:0}.client-use{border-top:1px solid currentColor;opacity:.7;margin-top:24px;padding-top:14px;display:grid;gap:8px}.client-use span{font:10px 'DM Mono',monospace;letter-spacing:.17em;color:currentColor;opacity:.7}.client-use strong{font-size:12px;line-height:1.45;font-weight:600;color:currentColor}.stage-counter{position:absolute;left:var(--gutter);bottom:42px;display:flex;align-items:center;gap:14px;z-index:10;font:10px 'DM Mono',monospace;letter-spacing:.14em;color:rgba(242,238,231,.5)}.stage-counter-current{color:var(--warm);font-size:14px}.stage-counter-rule{width:70px;height:1px;background:rgba(242,238,231,.3)}.side-progress{position:absolute;right:22px;top:50%;width:2px;height:120px;transform:translateY(-50%);background:rgba(242,238,231,.2);z-index:10}.side-progress-fill{display:block;width:100%;height:0;background:var(--warm);transition:height .55s}.exploder.is-scrolling .hero-dim{opacity:.22}.exploder.is-scrolling .intro-copy{opacity:.18;transform:translateY(-50%) translateX(-24px)}.scroll-steps{position:absolute;inset:0;pointer-events:none}.scroll-step{height:100vh}
.outro{min-height:75svh;padding:16vh var(--gutter);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--paper);color:var(--ink)}.outro h2{font:clamp(52px,8vw,110px)/.94 'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.05em;margin:0 0 25px}.outro>p:not(.eyebrow){max-width:430px;font-size:15px;line-height:1.7;opacity:.68}.back-top{margin-top:34px;color:var(--ink);font:10px 'DM Mono',monospace;letter-spacing:.16em;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:10px}.back-top span{font-size:16px;margin-left:8px}
@media(max-width:900px){.topbar{height:66px}.topbar-meta span:first-child,.meta-rule{display:none}.exploder-sticky{min-height:700px}.intro-copy{left:var(--gutter);top:16%;transform:none;width:calc(100% - var(--gutter)*2);z-index:11}.intro-copy h1{font-size:clamp(48px,12vw,76px);margin-bottom:18px}.intro-lede{font-size:13px;max-width:430px}.scroll-cue{margin-top:22px}.composition-wrap{left:50%;top:54%;height:min(56svh,500px);max-width:92vw;transform:translate(-43%,-50%) rotate(2deg)}.float-label{display:none}.floating-art{top:50%;left:50%;width:var(--origin-width);transform:translate(-50%,-50%) scale(1) rotate(-4deg)}.floating-art.is-active{transform:translate(-50%,-50%) scale(1) rotate(0)}.floating-art.was-active{transform:translate(-50%,-50%) scale(.78) rotate(4deg)}.explanation-card{left:var(--gutter);right:auto;top:auto;bottom:8%;width:min(76vw,390px);padding:22px;transform:translateY(25px);background:#f2eee7}.explanation-card.is-visible{transform:translateY(0)}.explanation-card h2{font-size:clamp(38px,10vw,58px);margin-bottom:14px}.card-copy{font-size:13px}.stage-counter{left:auto;right:var(--gutter);bottom:30px}.side-progress{right:10px;height:80px}.exploder.is-scrolling .intro-copy{opacity:.1}}
.floating-art.is-returning{left:var(--origin-x);top:var(--origin-y);width:var(--origin-width);transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:1;filter:drop-shadow(0 22px 18px rgba(0,0,0,.45));transition-duration:1.25s}
.exploder-sticky{perspective:1400px}
.explanation-card{transform-style:preserve-3d;overflow:hidden;transform:translateY(-38%) translateX(45px) rotateY(-8deg) rotateX(2deg) translateZ(0);box-shadow:32px 38px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.55)}
.explanation-card.is-visible{transform:translateY(-50%) translateX(0) rotateY(-4deg) rotateX(1deg) translateZ(24px);box-shadow:28px 34px 74px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.6)}
.explanation-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.08));opacity:.8;pointer-events:none}
.explanation-card::after{content:'';position:absolute;top:10px;right:-1px;width:2px;height:calc(100% - 20px);background:rgba(20,20,17,.18);box-shadow:8px 0 18px rgba(0,0,0,.14);pointer-events:none}
.explanation-card>*{position:relative;z-index:1}
@media(max-width:900px){.explanation-card{transform:translateY(25px) rotateY(-4deg) rotateX(1deg)}.explanation-card.is-visible{transform:translateY(0) rotateY(-2deg) rotateX(0) translateZ(12px)}}
.back-button{position:fixed;right:clamp(18px,3vw,42px);bottom:clamp(18px,3vw,34px);z-index:40;border:1px solid transparent;background:transparent;color:var(--paper);padding:10px 13px 11px;font:500 13px 'DM Mono',monospace;letter-spacing:.08em;line-height:1;cursor:pointer;perspective:500px;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}.back-letter{display:inline-block;transform-origin:50% 50%;transform-style:preserve-3d}.back-button:hover,.back-button:focus-visible{border-color:var(--ink);background:var(--paper);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.2);outline:none}.back-button:hover .back-letter,.back-button:focus-visible .back-letter{animation:odometer-flip .72s cubic-bezier(.2,.75,.25,1) both}.back-button:hover .back-letter:nth-child(1),.back-button:focus-visible .back-letter:nth-child(1){animation-delay:0s}.back-button:hover .back-letter:nth-child(2),.back-button:focus-visible .back-letter:nth-child(2){animation-delay:.08s}.back-button:hover .back-letter:nth-child(3),.back-button:focus-visible .back-letter:nth-child(3){animation-delay:.16s}.back-button:hover .back-letter:nth-child(4),.back-button:focus-visible .back-letter:nth-child(4){animation-delay:.24s}@keyframes odometer-flip{0%{transform:rotateX(0)}42%{transform:rotateX(180deg)}72%{transform:rotateX(350deg)}100%{transform:rotateX(360deg)}}.back-button:active{transform:translateY(2px) scale(.96);background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.4)}