:root{--stock:#ded9c8;--ink:#e9e4d6;--black:#191a16;--blue:#648faa;--hand:"Bradley Hand","Marker Felt",cursive}
html{background:var(--black);scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--black);color:var(--ink);overflow-x:clip}body.viewing{overflow:hidden}
a{text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}figure,p,h1,h2{margin:0}
.skip{position:fixed;top:10px;left:18px;transform:translateY(-180%);padding:12px;background:var(--stock);color:var(--black);z-index:100}.skip:focus{transform:none}
.masthead{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:start;gap:24px;padding:27px 4vw 22px;background:#191a16}
.brand{font-family:var(--sans);font-size:15px;letter-spacing:-.025em}.brand span{display:block;margin-top:5px;font:8px var(--mono);color:#aeac9f;letter-spacing:.04em}
.masthead nav{display:flex;gap:25px;padding-top:4px;font:10px var(--mono);color:#bbb8ac}.masthead a:hover{color:white}
.spread{position:relative;isolation:isolate;overflow:hidden}.canvas{position:relative;width:100%;max-width:1600px;margin:auto;aspect-ratio:1000/1050;isolation:isolate}
.ground-black{background:#191a16;color:#e8e1d0}
.ground-blue{background:#7093a6;color:#171b19}
.ground-cream{background:#d7d1bf;color:#24261f}
.spread::after{content:"";position:absolute;inset:0;z-index:14;pointer-events:none;opacity:.14;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.ground-black::after{mix-blend-mode:soft-light;opacity:.22}
.spread+.spread::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--stock);clip-path:polygon(0 0,100% 0,100% 25%,96% 65%,90% 40%,82% 88%,73% 40%,63% 100%,51% 30%,41% 60%,34% 20%,26% 80%,14% 25%,8% 70%,0 40%);opacity:.75;z-index:15}
.photo,.note{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r,0deg));z-index:var(--z,3)}
.photo{height:var(--h);filter:drop-shadow(1px 5px 5px #0005);transition:translate .3s var(--ease);isolation:isolate}
.photo:focus-within{z-index:20;outline:3px solid currentColor;outline-offset:8px}.photo:hover{translate:0 -3px;z-index:12}
.photo button{display:block;width:100%;height:100%;position:relative;overflow:hidden;background:#24251f}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:7px;bottom:6px;color:#f4eee1;font:clamp(5px,.65vw,10px) var(--mono);letter-spacing:.03em;text-shadow:0 1px 3px #000;pointer-events:none;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo.paper{padding:clamp(5px,.8vw,13px) clamp(5px,.8vw,13px) clamp(23px,2.8vw,42px);background:var(--stock);box-shadow:inset 0 0 25px #99927e50}
.photo.paper::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 12px #5b4b3826}
.photo.paper figcaption{left:4%;bottom:3%;font-family:var(--hand);font-size:clamp(11px,1.3vw,22px);color:#303126;text-shadow:none;transform:rotate(-1deg)}
.photo.rough{clip-path:polygon(.7% 1.4%,22% 0,47% .8%,65% 0,83% 1%,99% .3%,100% 25%,99.5% 49%,100% 79%,98.8% 100%,79% 99%,51% 100%,25% 98.9%,0 100%,.8% 69%,0 41%)}
.photo.torn{clip-path:polygon(0 2%,3% 1%,8% 2%,12% 0,18% 1%,24% 0,31% 1.5%,37% 0,44% .8%,50% 0,57% 1%,64% 0,71% 1%,78% 0,86% 1%,92% 0,100% 1%,99% 17%,100% 32%,99% 50%,100% 73%,99% 90%,100% 98%,91% 100%,83% 99%,76% 100%,70% 98%,65% 100%,59% 99%,52% 100%,45% 99%,37% 100%,30% 99%,21% 100%,14% 98%,7% 100%,0 99%,1% 79%,0 63%,1% 44%,0 29%)}
.photo.taped::before,.tape{content:"";position:absolute;width:40%;height:13%;left:28%;top:-5%;z-index:12;transform:rotate(-7deg);background:linear-gradient(90deg,#b8ad7866,#ddd0a199 24%,#c8ba86aa 82%,#ad9f7355);backdrop-filter:blur(1px);box-shadow:0 1px 2px #0002;clip-path:polygon(3% 0,95% 4%,98% 16%,96% 30%,100% 51%,95% 64%,99% 82%,96% 100%,4% 97%,1% 82%,5% 71%,0 56%,4% 34%,0 14%);pointer-events:none}
.photo.strip{padding:8px 0;background:#191a16}
.photo.strip::before,.photo.strip::after{content:"";position:absolute;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,transparent 0 5px,#ded9c8 5px 10px,transparent 10px 15px);opacity:.7}
.photo.strip::before{top:2px}.photo.strip::after{bottom:2px}.photo.strip figcaption{bottom:12px}
.photo.cutout{filter:drop-shadow(3px 6px 2px #28241d25);mix-blend-mode:multiply;clip-path:polygon(13% 1%,85% 0,99% 25%,93% 49%,100% 82%,86% 100%,14% 99%,0 73%,7% 52%,0 21%)}
.photo.cutout button{background:none}
.note{height:auto;font-family:var(--hand);font-size:clamp(20px,3.4vw,58px);font-weight:400;line-height:.92;letter-spacing:-.035em;pointer-events:none;text-wrap:balance}
.name-scrap{color:#20221c;background:#ddd5bf;padding:1.4% 2.1% 1.8%;font-family:var(--sans);font-weight:500;font-size:clamp(30px,5.7vw,90px);line-height:.85;letter-spacing:-.08em;clip-path:polygon(1% 3%,18% 0,39% 2%,57% 0,77% 2%,100% 0,99% 36%,100% 62%,98% 99%,76% 98%,54% 100%,32% 98%,0 100%,1% 67%,0 28%);box-shadow:0 4px 7px #0004}
.label-scrap{background:#d6ceb9;color:#292c23;padding:1.5% 1.7%;font-family:var(--mono);font-size:clamp(9px,1.1vw,18px);line-height:1.55;letter-spacing:.015em;clip-path:polygon(0 4%,99% 0,98% 22%,100% 46%,98% 75%,100% 98%,66% 100%,33% 97%,0 100%,1% 67%)}
.stamp{font-family:var(--poster);font-size:clamp(23px,4.6vw,74px);line-height:.89;letter-spacing:-.01em;opacity:.8}
.type-note{font-family:var(--mono);font-size:clamp(8px,.95vw,15px);line-height:1.45;letter-spacing:.05em}
.ink{position:absolute;inset:0;z-index:10;width:100%;height:100%;pointer-events:none;overflow:visible}.ink-mobile{display:none}
.curved-note{fill:#1c211c;font-family:var(--hand);font-weight:500;letter-spacing:-.3px}.curved-note.light{fill:#e0dcc7}
.thread{fill:none;stroke:#272a22;stroke-linecap:round;filter:drop-shadow(1px 1px 0 #a6a08780)}
.thread.dark{stroke:#151914}.pencil{fill:none;stroke:#202820;stroke-width:1.7;stroke-linecap:round}.pencil.light{stroke:#ddd5bd}
.backing{position:absolute;inset:0;pointer-events:none;z-index:1}.scrap{position:absolute;display:block;background:#c5bea7;box-shadow:2px 8px 7px #0004;clip-path:polygon(0 2%,13% 0,29% 1%,45% 0,70% 1%,100% 0,99% 25%,100% 53%,99% 81%,100% 99%,80% 100%,59% 98%,38% 100%,18% 99%,0 100%,1% 72%,0 44%)}
.scrap-a{left:8%;top:11%;width:52%;height:34%;transform:rotate(1deg);background:repeating-linear-gradient(0deg,#c9c3af 0 27px,#797a6c55 28px,#c9c3af 29px)}
.scrap-b{left:43%;top:48%;width:43%;height:32%;transform:rotate(6deg);background:#252720}
.scrap-c{left:5%;top:82%;width:72%;height:9%;transform:rotate(3deg);background:repeating-linear-gradient(0deg,#b2ac9877 0 4px,#50574577 5px,#b2ac9877 6px);opacity:.65}
.ground-black .scrap-b{background:#7c8f85}.ground-cream .scrap-a{background:#71909a;transform:rotate(-8deg)}.ground-cream .scrap-b{background:#ccc4ac}
.tape-a{width:17%;height:3.3%;left:12%;top:8%;transform:rotate(-24deg);z-index:2}.tape-b{width:14%;height:3%;left:76%;top:71%;transform:rotate(23deg);z-index:2}
.folio{position:absolute;left:3%;bottom:1.1%;font:clamp(6px,.7vw,11px) var(--mono);font-weight:400;letter-spacing:.08em;opacity:.7;z-index:13}
#passing-through .canvas{margin-top:-1px}#passing-through .scrap-a{left:27%;top:9%;height:33%;width:53%;transform:rotate(-2deg)}
#after-the-lights .scrap-a{top:36%;left:10%;width:47%;height:40%;transform:rotate(-5deg)}#after-the-lights .scrap-b{top:7%;left:50%;width:35%;height:37%}
#out-there .scrap-a{top:5%;left:5%;width:42%;height:39%;transform:rotate(3deg)}
.archive{padding:100px 7vw 110px;display:grid;grid-template-columns:1fr 1.6fr;gap:9vw;background:#d9d3c1;color:#282c23;position:relative}
.archive .hand{display:block;font:clamp(30px,4vw,64px)/1 var(--hand);transform:rotate(-5deg);margin:5px 0 25px}
.archive h2{font-size:18px;font-weight:500;letter-spacing:-.04em;margin-bottom:12px}.archive p{font:10px/1.7 var(--mono);color:#666858}
.roll{border-top:1px solid #292d2540}.roll:last-child{border-bottom:1px solid #292d2540}.roll summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;padding:20px 0;font-size:17px;letter-spacing:-.025em}.roll summary::-webkit-details-marker{display:none}.roll-number{font:9px var(--mono);opacity:.6}.roll summary small{margin-left:auto;white-space:nowrap;font:8px var(--mono);opacity:.65}.roll-plus{font-size:18px}.roll[open] .roll-plus{transform:rotate(45deg)}
.roll-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 0 24px}.roll-frames button{background:#c3bcaa;aspect-ratio:1.15;overflow:hidden}.roll-frames img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.roll-frames button:hover img{transform:scale(1.03)}
.colophon{background:#191a16;padding:75px 7vw 25px;display:flex;flex-direction:column;align-items:start;gap:25px}.colophon>.hand{font:clamp(40px,6vw,86px)/1 var(--hand);transform:rotate(-3deg)}.colophon>a{font-size:clamp(18px,3vw,42px);letter-spacing:-.05em}.colophon>div{width:100%;display:flex;justify-content:space-between;margin-top:75px;font:8px var(--mono);color:#aba897}
.viewer{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px 30px;border:0;background:#121410;color:#eee9dc;overflow:hidden}
.viewer::backdrop{background:#121410f5}.viewer[open]{display:flex;flex-direction:column}.viewer header,.viewer footer{display:flex;justify-content:space-between;gap:20px;align-items:center;font:10px var(--mono);min-height:38px}.viewer header>span{max-width:75%}.viewer header button{padding:12px;white-space:nowrap}.viewer footer{font-size:9px}
.viewer-frame{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px 50px}.viewer-frame img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}.viewer-frame button{position:absolute;top:45%;width:45px;height:60px;font-size:24px;background:#12141088}.viewer-prev{left:0}.viewer-next{right:0}.viewer button:hover{background:#e4dfcc;color:#171b14}.viewer:focus{outline:none}
.no-script{padding:70px 7vw}
@media(min-width:1700px){.spread{background-size:1600px auto}.canvas{max-width:1500px}}
@media(max-width:700px){
 .masthead{padding:20px 18px 14px;gap:12px}.brand{font-size:12px}.brand span{font-size:6px;max-width:115px;line-height:1.5}.masthead nav{gap:12px;font-size:8px;flex-wrap:wrap;justify-content:flex-end;max-width:53%}
 .canvas{aspect-ratio:400/1000;max-width:none}
 .photo,.note{left:var(--mx);top:var(--my);width:var(--mw);transform:rotate(var(--mr,0deg));z-index:var(--mz,3)}
 .photo{height:var(--mh);filter:drop-shadow(1px 3px 3px #0005)}.photo.paper{padding:5px 5px 23px}.photo.paper figcaption{font-size:13px}.photo figcaption{font-size:6px;left:5px;bottom:4px}
 .photo.strip{padding:6px 0}.photo.strip::before,.photo.strip::after{height:3px}.photo.strip::before{top:1px}.photo.strip::after{bottom:1px}
 .photo:hover{translate:none;z-index:var(--mz,3)}.photo:focus-within{z-index:20}
 .note{font-size:clamp(23px,7.5vw,39px);line-height:.92}.name-scrap{font-size:clamp(37px,12vw,72px);padding:3% 4%}.label-scrap{font-size:8px;line-height:1.5;padding:2.5% 3%}.stamp{font-size:clamp(25px,8vw,43px)}.type-note{font-size:6px;letter-spacing:.03em;line-height:1.6}
 .ink-desktop{display:none}.ink-mobile{display:block}.folio{left:4%;bottom:.7%;font-size:6px;max-width:90%}
 .scrap-a{left:6%;top:9%;width:80%;height:27%;transform:rotate(1deg)}.scrap-b{left:34%;top:32%;width:60%;height:26%;transform:rotate(8deg)}.scrap-c{left:3%;top:82%;width:78%;height:12%;transform:rotate(4deg)}
 .tape-a{left:14%;top:9%;width:22%;height:2%}.tape-b{left:66%;top:80%;width:22%;height:2%}
 #passing-through .scrap-a{left:30%;top:7%;height:23%;width:65%;transform:rotate(-2deg)}#passing-through .scrap-b{left:3%;top:35%;height:23%;width:72%;transform:rotate(-2deg)}
 #in-good-company .scrap-a{left:0;top:12%;width:44%;height:26%;transform:rotate(-7deg)}#in-good-company .scrap-b{left:25%;top:50%;width:55%;height:29%;transform:rotate(6deg)}
 #after-the-lights .scrap-a{top:30%;left:7%;width:55%;height:29%;transform:rotate(-4deg)}#after-the-lights .scrap-b{top:58%;left:26%;width:65%;height:24%}
 #out-there .scrap-a{top:8%;left:5%;width:77%;height:28%;transform:rotate(3deg)}#out-there .scrap-b{top:61%;left:36%;width:60%;height:23%}
 .archive{padding:60px 22px 65px;display:block}.archive header{margin-bottom:35px}.archive .hand{font-size:39px;margin-bottom:25px}.archive h2{font-size:17px}.archive p{font-size:9px}.roll summary{gap:10px;padding:19px 0;font-size:15px}.roll summary small{font-size:7px}.roll-number{font-size:8px}.roll-frames{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .colophon{padding:55px 22px 23px;gap:22px}.colophon>.hand{font-size:43px}.colophon>a{font-size:23px}.colophon>div{font-size:7px;margin-top:55px;gap:18px}
 .viewer{padding:12px}.viewer header{font-size:8px;gap:8px}.viewer header>span{max-width:70%;line-height:1.5}.viewer footer{font-size:7px;gap:8px}.viewer-frame{padding:15px 0 65px}.viewer-frame button{top:auto;bottom:0;width:50px;height:50px}.viewer-prev{left:calc(50% - 60px)}.viewer-next{right:calc(50% - 60px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo{transition:none}.roll-frames img{transition:none}}