:root{
  --ink:#151412;--paper:#EEEBE4;--card:#FAF8F3;--pencil:#4F4C46;--soft:#7A756C;--rule:#CFCAC0;--tape:rgba(232,222,198,.8);--shaving:#E2B98A;
  --serif:'Newsreader',Georgia,serif;--hand:'Reenie Beanie','Bradley Hand',cursive;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:21px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.02em}
em{font-weight:400}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.hand{font-family:var(--hand);font-size:36px;line-height:1;color:var(--pencil);letter-spacing:.01em}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:99}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* pencil lines draw themselves in */
.pencil{fill:none;stroke:var(--pencil);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.draw .pencil{stroke-dasharray:1;stroke-dashoffset:0}
.js .draw .pencil{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}
.js .draw.in .pencil,.js .in .draw .pencil{stroke-dashoffset:0}

/* fade in */
.js [data-reveal]{opacity:0;translate:0 18px;transition:opacity 1.1s var(--ease),translate 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;translate:0 0}

/* top bar */
.chrome{position:fixed;inset:0 0 auto 0;z-index:60;mix-blend-mode:difference;color:#fff;pointer-events:none;transition:transform .45s var(--ease)}
.chrome.hide{transform:translateY(-110%)}
.chrome.over-photo{mix-blend-mode:normal;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.chrome .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px}
.chrome a{pointer-events:auto;text-decoration:none;padding:10px 0}
.chrome .name{font-style:italic;font-size:20px}
.chrome .hand{color:inherit;font-size:36px}

/* stamp */
.stamp{display:block;color:currentColor;overflow:visible}
.stamp text{font-family:var(--serif);font-size:9.4px;letter-spacing:2.4px;font-weight:500}

/* taped photos */
.taped{position:relative;margin:0;background:var(--card);padding:10px;box-shadow:0 14px 30px -12px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.12);rotate:var(--r,0deg)}
.taped img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.taped::before{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;background:var(--tape);rotate:var(--tr,-3deg);box-shadow:0 1px 1px rgba(0,0,0,.06);
  clip-path:polygon(2% 0,98% 6%,100% 28%,97% 52%,100% 78%,98% 100%,3% 94%,0 72%,3% 46%,0 20%);z-index:2}
.taped figcaption{position:absolute;left:12px;right:12px;bottom:-50px;text-align:center}

/* 1 · opening */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000;color:#F4F2EC}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 30%;filter:grayscale(1) brightness(.7);transform:scale(1.08);animation:settle 3s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 60%)}
@media (min-width:900px){.hero::after{background:linear-gradient(90deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.66) 100%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 55%)}}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding-bottom:72px;z-index:2}
.hero-text{display:flex;flex-direction:column;gap:12px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 28px rgba(0,0,0,.6)}
.hero h1{font-weight:400;font-size:clamp(64px,7.6vw,120px);line-height:.95;letter-spacing:-.035em;opacity:0;animation:fadeup 1.4s .2s var(--ease) forwards}
.hero .lede{font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.2;max-width:17em;text-wrap:balance;opacity:0;animation:fadeup 1.4s .45s var(--ease) forwards}
.hero .hand{color:#E9E6DE;font-size:34px;margin-top:10px;opacity:0;animation:fadeup 1.4s .8s var(--ease) forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .stamp{position:absolute;z-index:2;right:5vw;top:15vh;width:clamp(110px,11vw,156px);color:#F4F2EC;opacity:.62}
.cue{position:absolute;z-index:2;left:24px;bottom:14px;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#E9E6DE;font-size:26px;padding:4px 10px}
.cue svg{width:16px;height:30px;animation:bob 2.4s ease-in-out infinite}
.cue .pencil{stroke:#E9E6DE}
@keyframes bob{50%{transform:translateY(6px)}}
@media (min-width:900px){.hero-text{margin-left:auto;width:min(600px,48vw)}}

/* 2 · prologue */
.prologue{padding:20vh 24px 16vh;max-width:1180px;margin:0 auto}
.prologue p{font-size:clamp(32px,4.4vw,62px);line-height:1.2;letter-spacing:-.02em;max-width:17em;font-weight:300}
.js .prologue .w{opacity:.14;transition:opacity .35s}
.js .prologue .w.on{opacity:1}
.prologue .wasnt{position:relative;display:inline-block;margin-top:22px;font-style:italic;font-weight:400}
.wasnt svg{position:absolute;left:-3%;bottom:-10px;width:106%;height:24px;overflow:visible}
.wasnt .pencil{stroke:var(--ink);stroke-width:2.2}

/* chapter number in a pencil circle */
.num{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;font-family:var(--hand);font-size:36px;line-height:1;color:var(--pencil)}
.num svg{position:absolute;inset:-6px;width:68px;height:68px;overflow:visible}
.chead{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.chead h2{font-size:clamp(44px,5.4vw,80px);line-height:1}

/* 3 · on the bench: the crate, taken apart */
.onbench{padding-bottom:18vh}
.onbench .intro{display:flex;flex-wrap:wrap;gap:24px 72px;align-items:flex-end;margin-bottom:40px}
.onbench .intro .chead{flex:1.2 1 440px}
.onbench .chead h2{font-size:clamp(40px,4.8vw,72px);line-height:1.02;max-width:12em}
.onbench .kicker{rotate:-2deg;margin:2px 0 -6px;color:var(--ink)}
.onbench .intro .body{flex:1 1 360px;display:flex;flex-direction:column;gap:18px;max-width:28em}
.crate{margin:0 auto;max-width:1040px}
.crate svg{width:100%;height:auto;overflow:visible}
.crate .face{fill:var(--paper)}
.crate .guides path{fill:none;stroke:var(--soft);stroke-width:1;stroke-dasharray:3 7;opacity:0;transition:opacity 1s 1.6s}
.crate.in .guides path{opacity:.8}
.crate .labels text{font-family:var(--hand);font-size:34px;fill:var(--ink)}
.crate .labels text.small{font-size:26px;fill:var(--pencil)}
.js .crate .labels{opacity:0;transition:opacity .9s 2.2s}
.js .crate.in .labels{opacity:1}
.js .crate .part{transform:translate(var(--x),var(--y));transition:transform 1.8s cubic-bezier(.5,0,.2,1) .7s}
.js .crate.in .part{transform:none}
.js .crate .nails{opacity:0;transition:opacity .8s 2s}
.js .crate.in .nails{opacity:1}
.after{display:flex;flex-wrap:wrap;gap:28px 64px;align-items:flex-start;margin-top:56px}
.after>p:first-child{flex:1.3 1 420px;font-size:23px;max-width:30em}
.after .hand{flex:1 1 240px;max-width:13em;rotate:-2deg;font-size:36px;line-height:1.05}

/* 4 · collage */
.collage{display:flex;flex-wrap:wrap;gap:72px;align-items:center;padding-bottom:20vh}
.collage .text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:24px}
.collage .text p{max-width:26em}
.wall{flex:1.4 1 520px;min-width:0;position:relative;min-height:740px}
.wall .taped{position:absolute}
.wall .p1{left:0;top:40px;width:54%;height:340px;--r:-3deg;--tr:4deg}
.wall .p2{right:0;top:0;width:44%;height:300px;--r:2.5deg;--tr:-5deg}
.wall .p3{left:30%;top:440px;width:48%;height:250px;--r:-1deg;--tr:2deg}
@media (max-width:700px){
  .wall{min-height:0;display:flex;flex-direction:column;gap:80px;padding-top:12px}
  .wall .taped{position:relative;left:auto;right:auto;top:auto;width:86%;height:280px}
  .wall .p2{align-self:flex-end}
}

/* 5 · quote */
.quote{padding:2vh 24px 22vh;max-width:1180px;margin:0 auto}
.quote blockquote{margin:0;font-style:italic;font-weight:300;font-size:clamp(38px,5.6vw,84px);line-height:1.12;letter-spacing:-.025em;max-width:14em}
.circled{position:relative;white-space:nowrap}
.circled svg{position:absolute;left:-9%;top:-10%;width:118%;height:126%;overflow:visible}
.circled .pencil{stroke:var(--ink);stroke-width:2}

/* 6 · the bench */
.bench{display:flex;flex-wrap:wrap;gap:56px 80px;align-items:center;padding-bottom:20vh}
.bench .sketch{flex:1.1 1 440px;min-width:0;position:relative}
.bench .sketch>svg{width:100%;height:auto;overflow:visible}
.bench .sketch .hand{position:absolute;left:2%;top:-4%;rotate:-4deg;font-size:36px;line-height:1.05}
.bench .text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:22px}
.bench .text>.hand{rotate:-1.5deg;margin-top:6px;font-size:36px}

/* 7 · hang tags */
.make{padding-bottom:20vh}
.make .top{display:flex;flex-wrap:wrap;gap:24px 72px;align-items:flex-end;margin-bottom:110px}
.make .top .chead{flex:1 1 360px}
.make .top p{flex:1 1 360px;color:var(--pencil);max-width:24em}
.tags{display:flex;flex-wrap:wrap;gap:110px 40px;justify-content:space-between;list-style:none;margin:0;padding:0}
.tag{position:relative;flex:1 1 260px;max-width:340px;rotate:var(--r,0deg);transform-origin:50% -48px}
.tag .string{position:absolute;left:50%;top:-64px;width:40px;height:84px;margin-left:-20px;overflow:visible;z-index:2}
.tag .card{position:relative;background:var(--card);padding:50px 26px 32px;box-shadow:0 16px 30px -16px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.1);
  clip-path:polygon(18% 0,82% 0,100% 11%,100% 100%,0 100%,0 11%)}
.tag .card::before{content:"";position:absolute;left:50%;top:16px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule)}
.tag .hand{display:block;font-size:36px;margin-bottom:8px}
.tag .ph{position:relative;margin:0 0 22px;background:var(--card);padding:6px 6px 30px;box-shadow:0 6px 14px -8px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05);rotate:var(--pr,-1.5deg)}
.tag .ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tag .ph::before{content:"";position:absolute;left:-12px;top:-8px;width:64px;height:22px;background:var(--tape);rotate:-28deg;clip-path:polygon(2% 0,98% 6%,100% 30%,97% 55%,100% 80%,98% 100%,3% 94%,0 70%,3% 45%,0 20%)}
.tag .ph figcaption{position:absolute;left:8px;right:8px;bottom:4px;text-align:center;font-size:26px;margin:0}
.tag:nth-child(2) .ph{--pr:1.5deg}
.tag:nth-child(3) .ph{--pr:-.8deg}
.tag h3{font-size:30px;line-height:1.1;margin-bottom:10px}
.tag p{font-size:18px;color:var(--pencil)}
@media (hover:hover){.tag:hover{animation:swing 1.6s ease-in-out}}
@keyframes swing{0%{rotate:var(--r,0deg)}20%{rotate:calc(var(--r,0deg) + 4deg)}45%{rotate:calc(var(--r,0deg) - 3deg)}70%{rotate:calc(var(--r,0deg) + 1.5deg)}100%{rotate:var(--r,0deg)}}

/* 8 · epilogue */
.epilogue{display:flex;flex-wrap:wrap;gap:80px 96px;align-items:center;padding-bottom:16vh}
.epi-text{flex:1.3 1 460px;min-width:0;display:flex;flex-direction:column;gap:28px}
.epi-text h2{font-size:clamp(48px,6vw,96px);line-height:.98;letter-spacing:-.035em}
.epi-text>p{max-width:26em;color:var(--pencil)}
.mail{position:relative;align-self:flex-start;font-style:italic;font-size:clamp(30px,3.8vw,54px);text-decoration:none;padding:2px 0 14px}
.mail svg{position:absolute;left:0;bottom:0;width:100%;height:14px;overflow:visible}
.mail .pencil{stroke:var(--ink);stroke-width:1.8}
.mail:hover{color:var(--pencil)}
.sign{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sign .hand{font-size:64px;color:var(--ink);rotate:-4deg}
.sign .stamp{width:96px;color:var(--ink);opacity:.72;rotate:12deg}
.where{font-style:italic;font-size:18px;color:var(--soft)}
.polaroid{flex:0 1 380px;margin:0 auto;padding:14px 14px 72px;--r:2.5deg;--tr:-6deg}
.polaroid img{aspect-ratio:4/5;height:auto}
.polaroid figcaption{bottom:18px;font-size:38px}
footer{border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;padding-top:24px;padding-bottom:36px;font-style:italic;font-size:15px;color:var(--soft)}
footer .credits{max-width:44em}

@media (max-width:700px){
  body{font-size:19px}
  .hero .stamp{top:11vh;right:16px;width:92px}
  .cue{display:none}
  .prologue{padding:14vh 24px 12vh}
  .collage,.make,.bench,.epilogue{padding-bottom:14vh}
  .quote{padding:0 24px 16vh}
  .make .top{margin-bottom:96px}
  .tag{max-width:none}
  .sign .hand{font-size:46px}
  .crate .labels text{font-size:46px}
  .crate .labels text.small{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero>img{animation:none;transform:none}
  .hero h1,.hero .lede,.hero .hand{animation:none;opacity:1}
  .cue svg{animation:none}
  .js [data-reveal]{opacity:1;translate:none;transition:none}
  .js .draw .pencil{stroke-dashoffset:0;transition:none}
  .js .prologue .w{opacity:1}
  .tag:hover{animation:none}
  .js .crate .part{transform:none;transition:none}
  .js .crate .labels,.js .crate .nails,.crate .guides path{opacity:1;transition:none}
}