/* One big table of prints. Scrolling is the only control. */
:root{
  --paper:#f1f0ec; --print:#fbfbf9; --ink:#1c1b19; --soft:#6f6c64; --hair:#d9d7d0;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Geist",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{position:fixed;inset:0;display:grid;place-content:center;text-align:center;padding:24px;background:var(--paper);z-index:99}
.noscript h1{font:400 56px/1 var(--serif);margin:0 0 12px}

/* scrolling */
#scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;outline:none;scrollbar-width:none;z-index:2}
#scroller::-webkit-scrollbar{display:none}
.step{height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}

/* the table */
#stage{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none}
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#drift{position:absolute;inset:0;will-change:transform}
#world{position:absolute;left:0;top:0;width:3000px;height:2300px;transform-origin:0 0;will-change:transform;transition:transform 1.25s cubic-bezier(.65,.02,.2,1)}

.intro{position:absolute;left:1500px;top:1050px;width:620px;transform:translate(-50%,-50%);text-align:center;transition:opacity .6s}
.intro .name{font:500 15px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.intro h1{font:400 68px/1.02 var(--serif);margin:20px 0 18px;text-wrap:balance;letter-spacing:-.008em}
.intro h1 em{font-style:italic}
.intro p{margin:0 auto;max-width:40ch;color:var(--soft);font-size:19px}
.outro{position:absolute;left:1500px;top:1080px;width:1100px;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .8s;pointer-events:none}
.outro.on{opacity:1}
.outro h2{font:400 120px/1 var(--serif);margin:0 0 26px}
.outro p{font:400 34px/1.4 var(--sans);color:var(--soft);margin:0;display:flex;gap:10px 34px;justify-content:center;flex-wrap:wrap}
.outro a{text-decoration:none;border-bottom:2px solid var(--hair)}

.print{position:absolute;background:var(--print);padding:7px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.07);
  transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),width .9s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .6s}
.print img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.print.lead{box-shadow:0 2px 4px rgba(0,0,0,.08),0 26px 50px rgba(0,0,0,.14);z-index:4}
.label{position:absolute;transform:translate(-50%,0);text-align:center;width:360px;transition:opacity .6s}
.label .mono{color:var(--soft)}
.label h2{font:400 34px/1.05 var(--serif);margin:6px 0 4px}
.label p{margin:0;color:var(--soft);font-size:14px;text-wrap:balance}
.dim{opacity:.12!important}
.gone{opacity:0!important}

.card{position:absolute;background:var(--print);padding:26px 26px 22px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.09);
  opacity:0;transform:translateY(16px) rotate(.8deg);transition:opacity .6s .45s,transform .8s .45s cubic-bezier(.2,.8,.2,1)}
.card.on{opacity:1;transform:rotate(.4deg)}
.card .mono{color:var(--soft)}
.card h2{font:400 42px/1 var(--serif);margin:8px 0 10px}
.card .idea{font:italic 400 22px/1.25 var(--serif);margin:0 0 18px;text-wrap:balance}
.card .beat{border-top:1px solid var(--hair);padding:10px 0 12px}
.card .beat h3{margin:0 0 3px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.card .beat p{margin:0;font-size:14.5px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px;color:var(--soft);border-top:1px dashed var(--hair);padding-top:10px;margin:4px 0 0}
.card dt{font:500 10.5px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.card dd{margin:0}
.card .try{display:inline-block;margin-top:16px;padding:8px 15px;border:1px solid var(--ink);border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.card .try:hover{background:var(--ink);color:var(--print)}
.card.compact{padding:20px}
.card.compact .beat,.card.compact dl{display:none}
.card.compact h2{font-size:34px}.card.compact .idea{font-size:19px;margin-bottom:4px}

/* fixed UI */
.rail{position:fixed;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:grid;gap:4px;z-index:20;justify-items:end}
.rail button{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--soft);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rail button span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;white-space:nowrap;background:var(--paper);padding:3px 6px;border-radius:3px}
.rail button i{display:block;width:14px;height:1px;background:var(--soft);transition:width .35s,background .35s}
.rail:hover button span,.rail button:focus-visible span{opacity:1;transform:none}
.rail button.on{color:var(--ink)}
.rail button.on i{width:30px;background:var(--ink)}
.top{position:fixed;left:0;right:0;top:calc(18px + env(safe-area-inset-top,0px));display:flex;justify-content:center;z-index:20;pointer-events:none}
.top span{color:var(--soft)}
.hint{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;display:grid;justify-items:center;gap:8px;color:var(--soft);transition:opacity .5s;pointer-events:none}
.hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--soft),transparent);animation:drip 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

@media (max-width:760px){.rail{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation:none!important}}