@font-face{font-family:"Space Mono";src:url(fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:only light;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#fff}
body{margin:0;color:#111;background:#fff;font:400 15px/1.9 "Space Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:lowercase;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
::selection{background:#111;color:#fff}
.stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#ink{display:block;width:100%;height:100%}
main{position:relative;z-index:1}
.corner{position:fixed;z-index:3;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 18px 0;font-size:10px;letter-spacing:.3em;color:#8a8a8a;pointer-events:none}
.corner--bottom{top:auto;bottom:0;padding:0 18px max(14px,env(safe-area-inset-bottom))}
.corner span{background:#fff;padding:2px 0}
.corner__r{text-align:right}

/* hero: the caption sits where the image has it, a fixed distance under the tangle */
.hero{height:175vh;position:relative}
.caption{position:fixed;left:0;right:0;top:var(--cap-y,64vh);margin:0;z-index:2;text-align:center;font-weight:400;font-size:clamp(16px,1.7vw,24px);letter-spacing:.42em;padding-left:.42em;line-height:1;white-space:nowrap;pointer-events:none;color:#111}
.caption .ghost{color:transparent}
.caret{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.12em}
.caret::after{content:"";position:absolute;left:-.3em;top:0;width:.6em;height:1.05em;background:#111;opacity:0}
.caption.typing .caret::after{opacity:1}
.caption.done .caret::after{animation:blink 1.06s steps(1) infinite}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
.hint{position:fixed;left:0;right:0;bottom:max(46px,calc(env(safe-area-inset-bottom) + 40px));margin:0;text-align:center;font-size:12px;letter-spacing:.3em;color:#9a9a9a;opacity:0;transition:opacity 1.2s ease;z-index:2;pointer-events:none}
.hint.on{opacity:1}

/* the sections: the line runs straight down the middle, behind the words */
.block{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12vh 20px}
.block p,.block ul,.block dl{margin:0 0 2.1em}
.block span{background:#fff;padding:.25em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.num{font-size:12px;letter-spacing:.34em;color:#8a8a8a;margin-bottom:3.6em!important}
.dim{color:#8a8a8a}
ul{list-style:none;padding:0}
li{margin:0 0 1.1em}
li::before{content:"";display:block;width:1px;height:0}
dl{width:min(100%,520px)}
dl div{display:flex;justify-content:space-between;gap:1.5em;margin:0 0 1.2em;align-items:baseline}
dt,dd{margin:0}
dd{white-space:nowrap}
dl div::after{content:none}

.end{height:150vh;position:relative}
.top{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--cap-y,64vh) + 64px);z-index:2;font-size:12px;letter-spacing:.3em;color:#8a8a8a;text-decoration:none;padding:12px 14px;opacity:0;pointer-events:none;transition:opacity .8s ease}
.top.on{opacity:1;pointer-events:auto}
.top:hover,.top:focus-visible{color:#111}
a:focus-visible{outline:1px dashed #111;outline-offset:4px}

/* reveal: words arrive one line at a time */
.js .block p,.js .block li,.js .block dl div{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .block .in{opacity:1!important;transform:none!important}

@media (min-width:900px){
  body{font-size:18px}
  .corner{padding:28px 36px 0;font-size:11px}
  .corner--bottom{padding:0 36px 26px}
  .block{min-height:100vh}
}

/* reduced motion: a still drawing, a still line, the words already there */
.rm .hero{height:100vh}
.rm .end{height:100vh}
.rm .caption{position:absolute}
.rm .top{position:absolute;opacity:1;pointer-events:auto}
.rm .stage{position:absolute;inset:auto;top:0;left:0;width:100%;height:100%}
.rm .block{border:0}
.rm main::before{content:"";position:absolute;left:50%;top:100vh;bottom:100vh;width:1.5px;background:#1a1a1a;transform:translateX(-50%);z-index:-1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:40px 18px max(80px,calc(env(safe-area-inset-bottom) + 70px));font-size:12px;letter-spacing:.3em;color:#8a8a8a;background:#fff}

#cap-top,#cap-end{top:48vh!important}
.top{top:calc(48vh + 64px)!important}
.e3z{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:5;color:#111;font-size:12px;letter-spacing:.35em;text-decoration:none;border-bottom:1px solid #111;padding-bottom:4px}
.hint{bottom:max(76px,calc(env(safe-area-inset-bottom) + 70px))!important}
.e3z:hover,.e3z:active{opacity:.6}
.e3z{font-size:16px!important;letter-spacing:0!important;padding:0 10px 4px!important}
.e3z{opacity:0;pointer-events:none;transition:opacity .6s ease}.e3z.on{opacity:1;pointer-events:auto}.rm .e3z{opacity:1;pointer-events:auto}