@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
.fragments-body{background:#131411;color:#e9e6dd;min-height:100vh;background-image:radial-gradient(ellipse at 50% 40%,#30312955,transparent 70%)}
.fragments-page{position:relative;isolation:isolate;min-height:100svh;--fragments-gutter:clamp(18px,3vw,60px);width:100%;max-width:none;margin:0;padding:150px var(--fragments-gutter) 70px;box-sizing:border-box}
.fragments-intro{margin:0 0 35px 2vw}.fragments-intro h1{font-size:clamp(54px,9vw,108px);font-weight:300;letter-spacing:-.065em;line-height:1;margin:14px 0 20px}.fragments-intro>p:last-child{opacity:.55;font-size:14px}
.fragment-board{position:relative;min-height:320px;width:100%;isolation:isolate;box-sizing:border-box}
.fragment{position:absolute;box-sizing:border-box;transform:rotate(var(--turn)) scale(var(--hierarchy-scale,1));box-shadow:2px 4px 6px #0005,0 1px 2px #0006;color:#30302b;transition:box-shadow .25s}
.fragment:hover,.fragment:focus-within{box-shadow:5px 16px 28px #0008}
.fragment.has-tape:before{content:'';position:absolute;width:var(--tape-width);height:27px;top:var(--tape-y);left:var(--tape-x);background:#bcb48a99;transform:translate(-50%,-50%) rotate(var(--tape-turn));box-shadow:0 1px 2px #0002;border-left:2px dashed #ddd6;border-right:2px dashed #ddd6;z-index:1;pointer-events:none}
.fragment-image{background:#e8dfce;padding:12px;box-shadow:inset 0 0 0 1px #b98a4a40,2px 4px 6px #0005,0 1px 2px #0006}
.fragment-image img{display:block;width:100%;height:auto;filter:saturate(var(--photo-saturation)) contrast(var(--photo-contrast)) brightness(var(--photo-brightness)) sepia(var(--photo-sepia)) saturate(var(--photo-tone-saturation));transition:filter .35s ease}
.fragment-text{padding:32px 26px;background-color:#e5dfc9;background-image:repeating-linear-gradient(0deg,transparent 0 27px,#776d5310 28px 29px);min-height:145px}
.fragment-text p{font-family:'Gloria Hallelujah','Segoe Print','Bradley Hand',cursive;font-size:calc(clamp(17px,1.5vw,22px) + var(--handwriting-size-offset,0px));font-weight:400;line-height:1.15;white-space:pre-wrap;overflow-wrap:normal;word-break:normal;hyphens:none;margin:0}
.fragment-text.paper-1{background-color:#d7d5c0;border-radius:2px 5px 18px 3px}.fragment-text.paper-2{background-color:#e0cdbb}
.fragment-audio{padding:30px 20px 22px;background:#c4c5b4}.sound-label{font-family:monospace;font-size:12px;letter-spacing:.08em}.sound-wave{height:52px;display:flex;gap:3px;align-items:center;margin:12px 0}.sound-wave i{flex:1;background:#44463b;opacity:.7}.fragment audio{display:none}
.fragments-empty{color:#aaa;font-family:Georgia,serif;font-style:italic;text-align:center;padding:100px 20px}
.fragment-fallback{display:flex;flex-wrap:wrap;gap:30px}.fragment-fallback article{max-width:300px}.fragment-fallback img{max-width:100%}
.fragment-image-button{display:block;width:100%;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left;font:inherit}
.fragment-image.is-open{z-index:20!important;transform:rotate(0deg) scale(1.15);box-shadow:8px 22px 40px #000a}
.fragment-title{display:block;font-family:monospace;font-size:13px;line-height:1.5;margin:16px 0 0;overflow-wrap:anywhere}.fragment-title[hidden]{display:none}
.fragment-image .fragment-title{position:absolute;bottom:12px;left:12px;right:12px;margin:0;padding:8px 10px;background:#e8dfceed;opacity:0;transition:opacity .2s;pointer-events:none}
.fragment-image.is-open .fragment-title{position:static;margin:14px 0 4px;padding:0;background:none;opacity:1;min-height:22px}
.fragment-play{border:1px solid #494c3c;background:transparent;border-radius:100px;padding:10px 20px;color:#30332a;font:inherit;font-size:13px;cursor:pointer}.fragment-play:hover{background:#30332a;color:#eeeee3}
.fragment-image-button:focus-visible,.fragment-play:focus-visible{outline:2px solid #80633b;outline-offset:6px}
@media(max-width:760px){.fragments-page{padding-top:125px}.fragment-text{padding:27px 22px}.fragment-text p{font-size:calc(20px + var(--handwriting-size-offset,0px))}.fragment-image{padding:9px}.fragment-image .fragment-title{left:9px;right:9px;bottom:9px}}
@media(prefers-reduced-motion:reduce){.fragment,.fragment-title,.fragment-image img{transition:none}}
/* Fragments photo treatment: tune these values together. */
.fragments-body {
 --photo-saturation: 0;
 --photo-open-saturation: .60;
 --photo-contrast: 1.28;
 --photo-brightness: .65;
 --photo-sepia: .90;
 --photo-tone-saturation: 1.30;
 --photo-open-sepia: .22;
 --photo-bronze: rgb(185 138 74 / 16%);
 --photo-open-bronze: rgb(185 138 74 / 8%);
 --photo-vignette: .40;
}
.fragment-image.is-open {
 --photo-saturation: var(--photo-open-saturation);
 --photo-sepia: var(--photo-open-sepia);
 --photo-tone-saturation: 1.05;
 --photo-bronze: var(--photo-open-bronze);
}
.fragment-photo { display: block; position: relative; overflow: hidden; }
.fragment-photo::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: radial-gradient(ellipse at center, transparent 45%, rgb(28 19 10 / var(--photo-vignette)) 100%), linear-gradient(var(--photo-bronze), var(--photo-bronze));
}

/* A mixture of straight prints, polaroids, notes and pinned scraps. */
.fragment.has-pin::after{content:"";position:absolute;top:7px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ecb59c 0 10%,#813e2d 35%,#40251c 80%);box-shadow:1px 3px 3px #0008;z-index:8;pointer-events:none}
.fragment-text.paper-2{background-color:#d6ce8e;clip-path:polygon(0 1%,99% 0,100% 97%,75% 99%,50% 98%,22% 100%,1% 97%)}
.fragment-text.paper-1{background-color:#e2dac3;background-image:none;border-radius:0 2px 12px 1px}
@media(max-width:600px){.fragment-text p{font-size:calc(18px + var(--handwriting-size-offset,0px))}}

.fragment[hidden]{display:none!important}

.fragment-image.has-pin::after{background:radial-gradient(circle at 30% 25%,#f2d7a3 0 10%,#b98a4a 35%,#61401f 80%)}

/* Center the selected photo above the collage, independently of its layout. */
.fragment-viewer{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;box-sizing:border-box;padding:28px;border:0;background:#090908b8;color:var(--paper);overflow:auto}
.fragment-viewer::backdrop{background:transparent;backdrop-filter:blur(2px)}
.fragment-viewer[open]{display:flex;align-items:center;justify-content:center}
.fragment-viewer-stage{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;}
.fragment-viewer .fragment-image{position:relative;left:auto;top:auto;width:fit-content;max-width:min(90vw,1100px);transform:none!important;box-shadow:0 20px 70px #000b;animation:fragment-viewer-reveal .25s ease-out}
.fragment-viewer .fragment-photo{width:fit-content;max-width:100%;margin:auto}
.fragment-viewer .fragment-image img{width:auto;max-width:100%;height:auto;max-height:72vh;object-fit:contain}
.fragment-viewer .fragment-title{max-height:12vh;overflow:auto;text-align:center}
.fragment-viewer-close{position:fixed;right:18px;top:12px;border:0;background:transparent;color:#e8dfce;font-size:36px;line-height:1;padding:10px;cursor:pointer;z-index:30}
.fragment-viewer-close:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.fragment-viewer-active{overflow:hidden}
@keyframes fragment-viewer-reveal{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){.fragment-viewer{padding:50px 20px 25px}.fragment-viewer .fragment-image{max-width:100%}.fragment-viewer .fragment-image img{max-height:65vh}}
@media(prefers-reduced-motion:reduce){.fragment-viewer .fragment-image{animation:none}}

/* Sparse dust and fine scratches, clipped to the photograph itself. */
.fragments-body{--photo-damage-opacity:.55}
.fragment-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url('../images/photo-dust-0.svg');background-size:100% 100%;background-repeat:no-repeat;opacity:var(--photo-damage-opacity)}
.fragment-photo.photo-dust-1::before{background-image:url('../images/photo-dust-1.svg')}
.fragment-photo.photo-dust-2::before{background-image:url('../images/photo-dust-2.svg')}

/* The paper surface is separate from pins/tape so torn edges never clip them. */
.fragment-text,.fragment-text.paper-1,.fragment-text.paper-2{background:none;border-radius:0;clip-path:none;box-shadow:none;filter:drop-shadow(2px 4px 3px #0005)}
.fragment-text p{position:relative;z-index:1}
.fragment-paper-surface{position:absolute;inset:0;pointer-events:none;background-color:var(--scrap-paper,#e3d9bc);background-image:url('../images/paper-fibers.svg?v=2'),radial-gradient(ellipse at 0 100%,#8a602a36,transparent 55%),radial-gradient(ellipse at 100% 0,#fff9e755,transparent 65%),linear-gradient(100deg,#6c512012,transparent 14% 87%,#7557251a);background-position:var(--paper-grain-x,0px) 0,0 0,0 0,0 0;box-shadow:inset 0 0 18px #6d51202b;clip-path:polygon(0 1%,18% 0,37% 1%,64% .3%,85% 1%,99% 0,100% 28%,99.4% 55%,100% 83%,99% 99%,76% 100%,57% 99%,32% 100%,13% 99%,0 100%,.6% 74%,0 48%,.5% 23%)}
.paper-1 .fragment-paper-surface{--scrap-paper:#ddd3b8;clip-path:polygon(.5% 0,98% .6%,100% 2%,99.5% 98%,96% 100%,73% 99%,54% 100%,30% 98.8%,12% 100%,0 99%,.7% 68%,0 36%)}
.paper-2 .fragment-paper-surface{--scrap-paper:#d8cc9e;clip-path:polygon(0 2%,14% .4%,29% 1.7%,51% 0,74% 1.2%,98% .3%,100% 4%,99.3% 28%,100% 62%,98.8% 98%,81% 99%,62% 98%,43% 100%,22% 99%,1% 100%,0 73%,1% 48%)}
.fragment-paper-surface.has-fold::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--fold-angle,80deg),transparent 0 var(--fold-position,50%),#6f563022 calc(var(--fold-position,50%) + .4%),#fff7dc50 calc(var(--fold-position,50%) + 1%),transparent calc(var(--fold-position,50%) + 2%))}
.fragment-paper-surface.has-curled-corner::after{content:"";position:absolute;right:0;bottom:0;width:16px;height:17px;background:linear-gradient(135deg,#8b754744,#efe3c2 50%,#b2a17c);clip-path:polygon(100% 0,100% 100%,0 100%);box-shadow:-1px -1px 3px #5a422033}

.fragment-text:hover,.fragment-text:focus-within{box-shadow:none;filter:drop-shadow(3px 6px 4px #0006)}

.paper-1 .fragment-paper-surface{background-image:url('../images/paper-fibers.svg?v=2'),radial-gradient(ellipse at 85% 70%,#785b2c24,transparent 48%),radial-gradient(ellipse at 10% 20%,#fff9e755,transparent 60%),linear-gradient(85deg,#6c512025,transparent 18% 85%,#75572522)}
.paper-2 .fragment-paper-surface{background-image:url('../images/paper-fibers.svg?v=2'),radial-gradient(ellipse at 30% 90%,#8a602a30,transparent 50%),radial-gradient(ellipse at 85% 10%,#fff9e755,transparent 60%),linear-gradient(140deg,#6c512020,transparent 20% 82%,#75572525)}

/* Worn photo mounts: texture lives beneath the photograph and caption. */
.fragment-image,.fragment-image:hover,.fragment-image:focus-within,.fragment-viewer .fragment-image{background:none;box-shadow:none;filter:drop-shadow(2px 5px 4px #0006)}
.fragment-viewer .fragment-image{filter:drop-shadow(0 15px 28px #0009)}
.fragment-frame-surface{position:absolute;inset:0;pointer-events:none;background-color:#e8dfce;background-image:url('../images/paper-fibers.svg?v=2'),radial-gradient(ellipse at 4% 95%,#88603045,transparent 45%),radial-gradient(ellipse at 95% 5%,#fff7e255,transparent 50%),linear-gradient(110deg,#76552318,transparent 15% 88%,#87663122);background-position:var(--frame-grain-x,0px) 0,0 0,0 0,0 0;box-shadow:inset 0 0 10px #85643655,inset 0 0 0 1px #9e82566b;clip-path:polygon(0 1px,20% 0,42% 1px,70% 0,calc(100% - 2px) 1px,100% 3px,calc(100% - 1px) 32%,100% 60%,calc(100% - 1px) 87%,100% calc(100% - 2px),78% 100%,52% calc(100% - 1px),27% 100%,1px calc(100% - 1px),0 75%,1px 49%,0 24%)}
.fragment-frame-surface.frame-wear-1{background-color:#e4dac7;clip-path:polygon(2px 0,36% 1px,73% 0,100% 2px,calc(100% - 1px) 40%,100% 78%,calc(100% - 2px) 100%,66% calc(100% - 1px),38% 100%,0 calc(100% - 2px),1px 62%,0 27%)}
.fragment-frame-surface.frame-wear-2{background-color:#ece3d3;background-image:url('../images/paper-fibers.svg?v=2'),radial-gradient(ellipse at 90% 90%,#8a633050,transparent 48%),radial-gradient(ellipse at 0 0,#b3997130,transparent 38%),linear-gradient(80deg,#76552315,transparent 20% 84%,#87663120)}
.fragment-image-button{position:relative;z-index:1}
.fragment-image.has-tape::before{z-index:5}

.fragment-text.text-single-word{display:flex;align-items:center;justify-content:center}
.fragment-text.text-single-word p{width:100%;text-align:center}

.fragment-text.text-single-word p{white-space:nowrap}

/* Slightly deeper chips and scuffs on the mount, never on the photo itself. */
.fragment-frame-surface{clip-path:polygon(3px 1px,10% 0,21% 2px,32% 0,33% 3px,35% 1px,54% 0,73% 2px,89% 0,calc(100% - 3px) 2px,100% 5px,calc(100% - 2px) 22%,100% 39%,calc(100% - 3px) 40%,calc(100% - 1px) 43%,100% 65%,calc(100% - 2px) 83%,100% calc(100% - 4px),calc(100% - 5px) 100%,83% calc(100% - 2px),68% 100%,66% calc(100% - 3px),64% calc(100% - 1px),42% 100%,23% calc(100% - 2px),5px 100%,1px calc(100% - 4px),0 79%,2px 63%,0 45%,3px 43%,1px 40%,0 19%)}
.fragment-frame-surface.frame-wear-1{clip-path:polygon(5px 0,17% 2px,39% 0,57% 1px,79% 0,81% 3px,84% 1px,calc(100% - 4px) 2px,100% 6px,calc(100% - 2px) 30%,100% 54%,calc(100% - 3px) 76%,100% calc(100% - 3px),calc(100% - 6px) 100%,79% calc(100% - 1px),52% 100%,33% calc(100% - 3px),29% 100%,3px calc(100% - 1px),0 calc(100% - 5px),2px 72%,0 49%,3px 25%,0 7px)}
.fragment-frame-surface::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url('../images/photo-dust-1.svg'),repeating-linear-gradient(174deg,transparent 0 28px,#72532915 29px,transparent 30px 67px);background-size:300px 225px,100% 100%;background-position:var(--frame-grain-x,0px) 0,0 0;opacity:.65}

/* Video stays behind the existing scrapbook, in its own masked layer. */
.fragments-stage{position:relative;isolation:isolate;z-index:1}
.fragments-stage>.fragment-board{z-index:1}
.uf-fragments-background{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--uf-fb-opacity,.35);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--uf-fb-top,15%),#000 calc(100% - var(--uf-fb-bottom,20%)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--uf-fb-top,15%),#000 calc(100% - var(--uf-fb-bottom,20%)),transparent 100%)}
.uf-fragments-background-horizontal{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--uf-fb-left,10%),#000 calc(100% - var(--uf-fb-right,10%)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--uf-fb-left,10%),#000 calc(100% - var(--uf-fb-right,10%)),transparent 100%)}
.uf-fragments-background video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Applied by JS before the cards are inserted; removed completely on arrival. */
.fragment-board[data-entrance-active]>.fragment{visibility:hidden}
.fragment-board>[data-entrance-ghost]{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.fragment-board[data-entrance-active]>.fragment{visibility:visible}}

/* Composite all cards and their effects as one adjustable layer. */
.fragment-board{opacity:var(--uf-fragments-opacity,1)}

/* Keep the introductory typography above the extended video atmosphere. */
.fragments-intro{position:relative;z-index:1}

/* Five full-width slices follow the selected photo between collage and dialog. */
.fragment-viewer .fragment-image{animation:none}
.fragment-viewer-morph{position:fixed;pointer-events:none;transform-origin:center;z-index:25;will-change:transform}
.fragment-viewer .fragment-viewer-slice{position:absolute;inset:0;margin:0;max-width:none;box-sizing:border-box;pointer-events:none;visibility:visible;filter:none}
.fragment-viewer-morph canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Supporter credits share the collage's warm paper and the site's light typography. */
.fragment-existence{min-height:230px;padding:24px;display:flex;flex-direction:column;gap:20px;background:none;color:#353027;border:0;outline:0;box-shadow:none;filter:drop-shadow(2px 4px 3px #0005);transform:rotate(0deg) scale(1)}
.fragment-existence:hover{box-shadow:none;filter:drop-shadow(3px 6px 4px #0006)}
.fragment-existence>.fragment-paper-surface{--scrap-paper:#e3d9bc}
.fragment-existence>p,.existence-credit{position:relative;z-index:1}
.fragment-existence p{margin:0}
.existence-label{font:400 9px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#79613d}
.existence-credit{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}
.existence-name{font:300 25px/1.2 var(--sans);letter-spacing:-.035em;overflow-wrap:anywhere}
.existence-caption{font:400 11px/1.5 var(--sans);color:#6d6250}
.existence-serial{font:10px/1.5 monospace;letter-spacing:.1em;border-top:1px solid #79613d40;padding-top:10px;color:#79613d}

/* Reveal the intro after the scatter settles; retain the title glitch. */
.fragments-page:has(.fragment-board[data-entrance-active]) .fragments-intro{visibility:hidden}