/* The making-of: an animator's desk. Rigid soft-serif headlines, fluid little walker. */
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-Italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Hand;src:url(../fonts/Caveat-Bold.woff2)}
@font-face{font-family:Mono;src:url(../fonts/GeistMono-Regular.woff2)}
@font-face{font-family:Geist;src:url(../fonts/Geist-SemiBold.woff2)}
:root{--clay:#D97757;--paper:#f4ecda;--sheet:#fbf4e4;--ink:#1a1408;--pencil:#5b7fb5;--soft:rgba(26,20,8,.62);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{color:var(--ink);font:19px/1.55 Fraunces,Georgia,serif;font-variation-settings:"opsz" 18,"SOFT" 50;overflow-x:clip}
img{display:block;width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
h1,h2,h3{font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;letter-spacing:-.022em;line-height:1}
h1{font-size:clamp(58px,11.4vw,214px);line-height:.9}
h2{font-size:clamp(42px,6.6vw,112px);margin-bottom:.45em;line-height:.96}
h3{font-size:clamp(26px,2.7vw,40px);line-height:1.05}
.w{display:inline-block;overflow:clip;padding:.1em .04em .18em;margin:-.1em -.04em -.18em}
.wi{display:inline-block}
.js .reveal .wi{transform:translateY(112%);transition:transform .95s var(--ease);transition-delay:calc(var(--i)*75ms)}
.js .reveal.in .wi{transform:none}
.js .fade{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .9s var(--ease)}
.js .fade.in{opacity:1;transform:none}
.mono,.scene,.n,.foot,figcaption{font-family:Mono,monospace;font-variation-settings:normal}
.scene{font-size:13px;letter-spacing:.06em;color:var(--pencil);margin-bottom:26px}
.hand{display:block;font:30px/1.05 Hand,cursive;font-variation-settings:normal;color:var(--pencil);transform:rotate(-1.6deg);margin-top:16px}

/* scroll meter: she walks the page */
.meter{position:fixed;left:0;right:0;top:0;height:64px;z-index:10;pointer-events:none;background:linear-gradient(var(--paper) 42%,rgba(244,236,218,0))}
.meter .line{position:absolute;left:clamp(16px,4vw,56px);right:clamp(92px,10vw,140px);top:49px;height:1px;background:var(--ink);opacity:.4}
#tiny{position:absolute;left:clamp(16px,4vw,56px);top:2px;width:27px;height:48px;margin-left:-13px;background:url(../img/walk-8.webp) 0 0/800% 100% no-repeat;transform:translateX(var(--x,0)) scaleX(var(--f,-1))}
.count{position:absolute;right:clamp(16px,4vw,56px);top:14px;font:15px Mono,monospace;font-variation-settings:normal}
.count b{font-weight:400}.count span{color:var(--clay)}

.top{min-height:100svh;display:flex;align-items:flex-end;padding:100px clamp(16px,4vw,56px) clamp(32px,6vh,70px)}
.lede{max-width:34em;font-size:clamp(20px,1.9vw,27px);line-height:1.38;margin-top:34px}
.actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}
.btn{display:inline-block;padding:13px 20px;background:var(--ink);color:var(--paper);font:14px Mono,monospace;font-variation-settings:normal;text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--clay);color:var(--ink)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.actions .mono{font-size:13px}

.sheet{position:relative;max-width:980px;margin:0 auto clamp(26px,5vh,60px);padding:clamp(62px,9vh,96px) clamp(22px,6vw,92px) clamp(46px,8vh,90px);background:var(--sheet);box-shadow:0 1px 0 rgba(26,20,8,.1),0 26px 50px -38px rgba(26,20,8,.45)}
.sheet.wide{max-width:1320px}
.pegs{position:absolute;left:0;right:0;top:18px;display:flex;justify-content:center;gap:clamp(60px,14vw,200px)}
.pegs i{width:48px;height:13px;border-radius:7px;background:var(--paper);box-shadow:inset 0 2px 3px rgba(26,20,8,.34)}
.pegs i:nth-child(2){width:17px;height:17px;border-radius:50%;margin-top:-2px}
.sheet>p{max-width:36em}.sheet>p+p{margin-top:1em}

.note{transform:rotate(-.5deg)}
blockquote{font:clamp(28px,2.9vw,40px)/1.16 Hand,cursive;font-variation-settings:normal;color:#3e352c}
blockquote p+p{margin-top:.75em}
cite{display:block;font-style:normal;color:var(--clay);margin-top:.5em}

.steps{list-style:none;padding:0;margin-top:30px}
.step{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,5vw,70px);align-items:center;padding:clamp(26px,5vh,54px) 0;border-top:1px solid rgba(26,20,8,.16)}
.step:nth-child(even) figure{order:2}
.step .n{font-size:13px;color:var(--clay);margin-bottom:8px}
.step h3{margin-bottom:12px}
figure img{box-shadow:0 18px 34px -24px rgba(26,20,8,.6)}
figcaption{font-size:12px;line-height:1.4;color:var(--soft);margin-top:9px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2px;background:rgba(26,20,8,.14);margin-top:10px}
.cards article{background:var(--sheet);padding:clamp(22px,3vw,38px)}
.cards h3{margin-bottom:12px}

.dark{background:#17120c;color:#f4ecda;max-width:1320px}
.dark .scene{color:#a9bfdf}.dark .pegs i{background:var(--paper);box-shadow:none}
.broke>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(12px,4vw,56px);padding:26px 0;border-top:1px solid rgba(244,236,218,.24)}
.broke dt{font-size:clamp(28px,3vw,46px);font-weight:700;line-height:1.02;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;color:var(--clay)}
.broke dd{margin:0}

.team{width:100%;border-collapse:collapse;margin-top:10px}
.team th,.team td{text-align:left;vertical-align:top;padding:18px 0;border-top:1px solid rgba(26,20,8,.16);font-weight:400}
.team th{width:38%;padding-right:26px;font-size:clamp(23px,2.2vw,32px);line-height:1.05;font-weight:700;font-variation-settings:"opsz" 144,"SOFT" 100}
.team small{display:block;font:12px Mono,monospace;font-variation-settings:normal;color:var(--soft);margin-top:7px}

.center{text-align:center}.center>p{margin-inline:auto}.center .actions{justify-content:center}
.receipt{width:min(100%,460px);margin:0 auto 34px;padding:30px 28px 42px;background:#fffdf6;font:15px/1.5 Mono,monospace;font-variation-settings:normal;text-align:left;box-shadow:0 22px 40px -28px rgba(26,20,8,.6);clip-path:polygon(0 0,100% 0,100% 100%,97% 98%,94% 100%,91% 98%,88% 100%,85% 98%,82% 100%,79% 98%,76% 100%,73% 98%,70% 100%,67% 98%,64% 100%,61% 98%,58% 100%,55% 98%,52% 100%,49% 98%,46% 100%,43% 98%,40% 100%,37% 98%,34% 100%,31% 98%,28% 100%,25% 98%,22% 100%,19% 98%,16% 100%,13% 98%,10% 100%,7% 98%,4% 100%,0 98%)}
.mono-h{font:600 16px Mono,monospace;font-variation-settings:normal;letter-spacing:.05em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px dashed var(--ink);margin-bottom:12px}
.receipt ul{list-style:none;padding:0}
.receipt li{display:flex;justify-content:space-between;gap:14px}
.receipt li span{flex:1;display:flex;gap:8px;align-items:baseline;white-space:nowrap;overflow:hidden}
.receipt li span::after{content:"";flex:1;border-bottom:1px dotted rgba(26,20,8,.5)}
.receipt b{font-weight:400;white-space:nowrap}
.receipt li:last-child b{color:#b4532f}
.total{font-weight:600;margin-top:12px;padding-top:12px;border-top:1px dashed var(--ink)}
.honest{font-size:clamp(20px,1.9vw,27px);line-height:1.3;font-weight:600}
.foot{font-size:12px;color:var(--soft);margin-top:14px}

.closing{font-size:clamp(46px,8.2vw,134px)}
.credits{font-size:15px;line-height:1.5;color:var(--soft);max-width:44em;margin:34px auto 0}
.credits p+p{margin-top:9px}

@media (max-width:760px){
 body{font-size:18px}
 .step,.broke>div{grid-template-columns:1fr}
 .step:nth-child(even) figure{order:0}
 .team th{width:44%}
 .note{transform:none}
}
@media (prefers-reduced-motion:reduce){.js .reveal .wi,.js .fade{transform:none;opacity:1;transition:none}}