/* YUME STORIES: paper, cotton, sewn details and the maker's own photo album. */
:root{
 --paper-texture:url('textures/paper-fibers.webp');
 --cloth-texture:url('textures/cotton-weave.webp');
}
.hero-center::before,.hero-note,.hero-instagram,.card-title,.margin-note,.print-image,.filter{
 background-image:var(--paper-texture);background-size:680px;background-blend-mode:multiply;
}
.hero-center::before{background-color:#e4d6ef;inset:-14px -30px -26px}
.hero-center::after{content:'';position:absolute;inset:0 -22px -34px;z-index:-2;background:var(--scrap-cream) var(--paper-texture) center/700px;transform:rotate(.7deg);box-shadow:5px 10px 18px #32203e20}
.scrapbook-page .hero{padding-bottom:104px}
.paper-gingham{background-image:var(--scrap-check),var(--cloth-texture);background-size:auto,auto,300px;background-blend-mode:multiply;width:28%;height:485px;top:138px}
.paper-stars{background-color:var(--pink);background-image:url('paper-stars.svg'),var(--cloth-texture);background-size:250px,300px;background-blend-mode:multiply;width:30%;height:520px;top:145px}
.paper-stripes{background-image:repeating-linear-gradient(90deg,#583777cb 0 13px,transparent 13px 26px),var(--cloth-texture);background-color:var(--lilac);background-blend-mode:multiply;left:8%;top:90px;width:170px;height:120px}
.hero .star-one,.hero .star-two,.paper-dots,.paper-star{display:none}
.hero .heart-one{font-size:65px;bottom:63px;left:11%}
.heartmade{background-image:var(--cloth-texture);background-size:250px;background-blend-mode:multiply;border:0;outline:1.5px dashed var(--purple);outline-offset:-9px;box-shadow:3px 8px 12px #32203e24}
.hero-instagram{border-radius:2px 4px 3px 2px;box-shadow:3px 8px 12px #32203e25}
.hero-sticker img{filter:drop-shadow(5px 11px 6px #32203e30)}

/* These are sewing notions, separate from the working controls. */
.craft-trim{position:absolute;top:42px;right:max(52px,calc(50% - 550px));width:140px;height:220px;z-index:3;pointer-events:none;transform:rotate(14deg)}
.craft-trim>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(1px 2px 1px #32203e30)}
.sewn-button{position:absolute;display:block;width:51px;height:51px;border-radius:50%;background:var(--button-color);border:1px solid #5837775c;box-shadow:inset 2px 3px 4px #fffdf8c9,inset -2px -3px 4px #32203e25,3px 6px 7px #32203e30}
.sewn-button::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px solid #58377755;box-shadow:inset 1px 2px 3px #32203e25}
.sewn-button i{position:absolute;inset:16px;background:radial-gradient(circle at 2px 2px,var(--ink) 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 2px) 2px,var(--ink) 2px,transparent 2.5px),radial-gradient(circle at 2px calc(100% - 2px),var(--ink) 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),var(--ink) 2px,transparent 2.5px)}
.sewn-button i::before,.sewn-button i::after{content:'';position:absolute;top:8px;left:1px;right:1px;height:2px;background:var(--scrap-cream);transform:rotate(45deg);box-shadow:0 1px 1px #32203e40}
.sewn-button i::after{transform:rotate(-45deg)}
.trim-pink{left:57px;top:21px;transform:rotate(-12deg)}
.trim-green{left:27px;top:102px;transform:rotate(22deg)}
.trim-blue{left:74px;top:164px;width:39px;height:39px;transform:rotate(-17deg)}
.trim-blue i{inset:11px}.trim-blue i::before,.trim-blue i::after{top:7px}
.paperclip{position:absolute;display:block;width:24px;height:66px;border:3px solid #b19b6b;border-bottom-left-radius:15px;border-bottom-right-radius:15px;border-top-left-radius:12px;border-top-right-radius:12px;box-shadow:2px 3px 3px #32203e30,inset 1px 0 1px #fffdf8;pointer-events:none}
.paperclip::after{content:'';position:absolute;left:4px;top:8px;width:9px;height:44px;border:2px solid #b19b6b;border-top:0;border-radius:0 0 8px 8px}
.hero-paperclip{z-index:4;left:calc(50% - 230px);top:17px;transform:rotate(-14deg)}

/* A spread, not twelve identical mounts. Source order and filtering stay intact. */
.creature-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:53px 35px;align-items:start}
.creature-card{grid-column:span 2;min-width:0}
.creature-card:nth-child(n){margin-top:0}
.creature-card:nth-child(3n+2){padding-top:24px}
.creature-card.album-card{grid-column:span 4;padding-top:0}
.creature-card:nth-last-child(-n+2){grid-column:span 3}
.photo-link,.creature-card:nth-child(n) .photo-link{position:relative;background:var(--white) var(--paper-texture) center/650px;padding:14px 14px 12px;box-shadow:4px 11px 18px #32203e26;isolation:isolate}
.photo-layout{display:block;position:relative}
.photo,.creature-card:nth-child(n) .photo{aspect-ratio:1;border:0}
.photo img{object-position:var(--photo-position,center)}
.card-title{margin:0;padding:17px 6px 5px;min-height:76px;background:none;transform:none}
.card-title h3{font-size:18px}.card-title span{font-size:12px;margin-top:5px}
.creature-card:nth-child(n) .photo-link::before{width:77px;height:25px;top:-12px;left:36%;background:#fff8e8cf;box-shadow:0 2px 2px #32203e08}
.fabric-mount .photo-link::after{content:'';position:absolute;inset:-8px;z-index:-1;background:var(--matcha) var(--cloth-texture) center/260px;background-blend-mode:multiply;transform:rotate(2deg);border-radius:2px;outline:1px dashed #5837777a;outline-offset:-5px}
.fabric-mount .photo-link{transform:rotate(-1deg)}
.note-mount .photo-link{border-radius:1px 7px 2px 1px}
.note-mount .card-title{border-top:1px solid #58377720;margin-top:12px}
.creature-card.album-blue .photo-link{background:var(--blue) var(--cloth-texture) center/310px;background-blend-mode:multiply;padding:23px}
.creature-card.album-pink .photo-link{background:var(--pink) var(--cloth-texture) center/310px;background-blend-mode:multiply;padding:23px}
.album-card .photo-link::after{content:'';position:absolute;inset:9px;border:1px dashed #58377780;pointer-events:none}
.album-card .photo-layout{display:grid;grid-template-columns:minmax(0,1fr) 28%;gap:18px;align-items:stretch}
.creature-card.album-card .photo{aspect-ratio:1.05;border:7px solid var(--white);box-shadow:2px 5px 9px #32203e1a}
.photo-strip{display:grid;grid-template-rows:1fr 1fr;gap:9px;min-width:0;padding:9px;background:var(--white) var(--paper-texture) center/650px;box-shadow:3px 6px 10px #32203e24;transform:rotate(4deg)}
.photo-strip img{width:100%;height:100%;min-height:0;object-fit:cover;aspect-ratio:.86}
.single-strip{grid-template-rows:1fr;transform:rotate(-4deg)}
.single-strip img{aspect-ratio:auto;object-position:center}
.album-card .card-title{margin:18px 0 0;padding:12px 15px;min-height:0;background:var(--scrap-cream) var(--paper-texture) center/650px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;transform:rotate(-1deg)}
.album-card .card-title h3{font-size:23px}.album-card .card-title span{font-size:12px;flex:none}
.album-clip{right:23px;top:-19px;transform:rotate(11deg);z-index:2}
.album-card .photo-link::before{display:none}
.order-link{font-size:14px;min-height:48px;padding:16px 3px 4px;gap:12px}
.order-link svg{flex:none}
.creature-grid.is-filtered .creature-card{grid-column:span 2;padding-top:0}
.creature-grid.is-filtered .photo-strip{display:none}
.creature-grid.is-filtered .photo-layout{display:block}
.creature-grid.is-filtered .album-card .card-title{display:block}
.creature-grid.is-filtered .album-card .card-title h3{font-size:18px}
.creature-grid.is-filtered .album-card .photo-link{padding:14px}

/* A spiral-bound page on a fabric cover; labels and fields stay upright. */
.custom-section{background-color:#edbad3;background-image:var(--cloth-texture);background-size:360px;background-blend-mode:multiply;gap:92px}
.custom-section::before{width:42px;left:-16px;background-color:#f2d9aa;background-image:var(--scrap-check),var(--cloth-texture);background-size:auto,auto,300px;background-blend-mode:multiply}
.custom-intro{background:transparent}
.custom-star{display:none}
.custom-intro h2{font-size:clamp(34px,3.7vw,50px)}
.idea-paper{isolation:isolate;padding:54px 35px 32px 48px;transform:rotate(.6deg);background:var(--white);box-shadow:4px 14px 22px #66224d30}
.idea-paper::before{inset:-13px -13px -17px -18px;transform:rotate(-2.7deg);background:var(--blue) var(--cloth-texture) center/290px;background-blend-mode:multiply;border-radius:5px 12px 12px 4px;box-shadow:3px 8px 12px #32203e25}
.idea-paper::after{inset:0;background:linear-gradient(90deg,transparent 28px,#d3288138 28px,#d3288138 29px,transparent 29px),var(--paper-texture) center/750px,var(--white);border-radius:1px 4px 4px 1px}
.idea-paper .paper-tape{display:none}
.notebook-binding{position:absolute;left:-16px;top:32px;bottom:31px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.notebook-binding i{display:block;width:34px;height:15px;border:3px solid #8e7b99;border-radius:12px;box-shadow:inset 0 2px 2px #fffdf8,1px 2px 3px #32203e40;background:linear-gradient(transparent 40%,#58377725 70%,transparent)}
.notebook-tab{position:absolute;right:-26px;top:34px;width:40px;height:59px;background:var(--yellow) var(--cloth-texture) center/260px;background-blend-mode:multiply;color:var(--purple);font:600 30px/1.8 'Shantell Sans',sans-serif;text-align:center;border-radius:0 5px 5px 0;box-shadow:3px 4px 7px #32203e20;z-index:-1}
.idea-paper input,.idea-paper textarea{background:#fffdf8e8;border-color:#a08aa7;border-radius:2px;font-size:16px}
.idea-paper h3{font-size:23px}.idea-paper label{font-size:14px}
.color-suggestions{gap:6px;flex-wrap:wrap}
.swatch{width:44px;height:44px;padding:5px}
.swatch>span{position:relative;width:32px;height:32px;background-color:var(--color);background-image:radial-gradient(circle at 42% 42%,#583777 1.8px,transparent 2.5px),radial-gradient(circle at 62% 62%,#583777 1.8px,transparent 2.5px);border:1px solid #5837777a;box-shadow:inset 2px 2px 3px #fffdf8b8,inset -2px -2px 3px #32203e20,2px 3px 4px #32203e25}
.swatch>span::before{content:'';position:absolute;inset:4px;border:1px solid #5837774d;border-radius:50%}
.swatch>span::after{content:'';position:absolute;width:10px;height:2px;background:var(--scrap-cream);left:11px;top:15px;transform:rotate(45deg);box-shadow:0 1px 1px #32203e40}
.swatch[aria-pressed=true]{border-color:var(--purple);box-shadow:none;outline:1px solid var(--purple);outline-offset:1px}
.direct-contact{font-size:13px;line-height:1.7}

/* One Y2K camera-shaped viewer, using only the owner's existing photos. */
.about-collage{padding:34px 12px 35px 0}
.about-collage::before{inset:-14px 10px 10px -24px;background-color:var(--blue);background-image:var(--cloth-texture);background-size:300px;background-blend-mode:multiply;transform:rotate(4deg);outline:1px dashed var(--purple);outline-offset:-12px;clip-path:none;border-radius:3px}
.about-photo.memory-camera{position:relative;isolation:isolate;padding:17px 17px 18px;background:linear-gradient(145deg,#ecd9f3 0%,#cbb2dc 62%,#b899cf);border-radius:27px 31px 30px 25px;transform:rotate(-5deg);box-shadow:inset 2px 3px 3px #fffdf8bc,inset -3px -4px 5px #58377730,5px 14px 19px #32203e30}
.camera-top{height:39px;display:flex;align-items:center;gap:13px;padding:0 12px 9px;color:var(--purple)}
.camera-top .hand{font-size:19px;margin-right:auto}
.camera-light{width:7px;height:7px;border-radius:50%;background:#6c8355;box-shadow:inset 1px 1px 1px #fffdf8a0}
.camera-speaker{width:30px;height:12px;background:repeating-linear-gradient(90deg,#6a4d7c 0 2px,transparent 2px 6px)}
.camera-body{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:13px;align-items:center}
.camera-screen{padding:8px;background:#32203e;border-radius:8px;box-shadow:inset 2px 3px 5px #160f21;overflow:hidden}
.camera-screen img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;background:var(--ink);border-radius:2px}
.camera-side{display:flex;flex-direction:column;align-items:center;gap:19px}
.camera-dial{width:34px;height:34px;border-radius:50%;border:5px solid #e9d8f3;background:#baa2d0;box-shadow:2px 3px 4px #58377738,inset 1px 2px 2px #58377730}
.camera-side>i{width:7px;height:7px;border:1px solid #8f759e;border-radius:50%;background:#d8c5e4}
.memory-controls{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 52px 0 0}
.memory-controls button{display:grid;place-items:center;width:44px;height:36px;border:1px solid #8b709e;background:#e7d4ef;color:var(--ink);border-radius:14px;box-shadow:inset 1px 2px 2px #fffdf8a0,1px 3px 4px #58377728;transition:transform 160ms var(--ease),background 160ms ease}
.memory-controls button svg{width:20px}.memory-prev svg{transform:rotate(180deg)}
.memory-controls button:active{transform:scale(.96)}
.memory-counter{font-size:12px;font-weight:800;min-width:45px;text-align:center;font-variant-numeric:tabular-nums}
.memory-camera figcaption{position:relative;margin:26px 4px -55px;padding:11px 12px;background:var(--scrap-cream) var(--paper-texture) center/650px;transform:rotate(3deg);font-size:18px;box-shadow:3px 6px 9px #32203e24}
.camera-strap{position:absolute;right:-30px;bottom:29px;width:46px;height:125px;border:7px solid var(--pink);border-radius:45%;transform:rotate(-8deg);z-index:-1;box-shadow:2px 5px 7px #32203e20}
.about-stamp{right:-15px;bottom:-49px;background:var(--matcha) var(--cloth-texture) center/250px;background-blend-mode:multiply;width:103px;height:103px;font-size:19px;outline:1px dashed var(--purple);outline-offset:-8px;border:0}
.print-image{box-shadow:4px 12px 20px #0b061e60}

@media(hover:hover) and (pointer:fine){
 .memory-controls button:hover{background:var(--scrap-cream);transform:translateY(-1px)}
 .photo-link:hover{transform:rotate(0) translateY(-3px)}
}
@media(max-width:1100px){
 .craft-trim{right:35px;top:45px;transform:rotate(14deg) scale(.82);transform-origin:top right}
 .hero-paperclip{left:calc(50% - 205px)}
 .custom-section{gap:53px}.idea-paper{padding:45px 25px 28px 40px}
 .creature-grid{gap:43px 26px}.album-card .photo-layout{gap:12px}
 .card-title h3{font-size:16px}.album-card .card-title h3{font-size:20px}
 .memory-camera figcaption{font-size:16px}
 .camera-body{grid-template-columns:minmax(0,1fr) 25px;gap:9px}.camera-dial{width:26px;height:26px;border-width:4px}
}
@media(max-width:800px){
 .scrapbook-page .hero{min-height:1010px}
 .paper-gingham{top:590px;width:44%;height:390px}.paper-stars{top:605px;width:45%;height:370px}
 .paper-stripes{left:-35px;top:70px}
 .craft-trim{top:70px;right:11px;transform:rotate(14deg) scale(.65)}
 .hero .heart-one{bottom:72px;left:44%}
 .creature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 25px}
 .creature-card,.creature-card:nth-last-child(-n+2){grid-column:span 1}
 .creature-card.album-card{grid-column:span 2}
 .creature-card:nth-child(n){padding-top:0}
 .creature-grid.is-filtered .creature-card{grid-column:span 1}
 .custom-section{grid-template-columns:1fr;gap:48px}
 .custom-intro{max-width:620px}.custom-intro h2{font-size:43px}.custom-intro p{font-size:16px}
 .custom-making{display:none}
 .idea-paper{width:100%;max-width:560px;justify-self:center;padding:49px 36px 32px 49px}
 .about-section{grid-template-columns:1fr;gap:90px}.about-collage{max-width:530px;width:calc(100% - 20px);margin:auto}
 .about-copy{max-width:600px}.about-stamp{right:-15px;bottom:-46px}
}
@media(max-width:600px){
 .scrapbook-page .hero{padding-bottom:74px;min-height:1000px}
 .hero-center::before{inset:-10px -4px -21px}.hero-center::after{inset:0 2px -29px}
 .hero-paperclip{left:33px;top:2px;transform:rotate(-14deg) scale(.75)}
 .craft-trim{top:740px;right:43%;transform:rotate(7deg) scale(.49)}
 .paper-stripes{top:58px;left:-82px}
 .paper-gingham{top:651px;height:297px;width:53%}.paper-stars{top:698px;height:258px;width:58%;right:-60px}
 .hero .heart-one{display:none}
 .heartmade{top:-48px;right:1px}
 .creature-grid{gap:34px 18px;max-width:440px}
 .photo-link,.creature-card:nth-child(n) .photo-link{padding:9px 9px 11px}
 .photo,.creature-card:nth-child(n) .photo{aspect-ratio:1}
 .card-title{padding:12px 2px 0;min-height:87px}.card-title h3{font-size:14px;min-height:0;line-height:1.5}.card-title span{font-size:11px}
 .creature-card.album-card .photo-link{padding:16px}
 .album-card .photo-layout{grid-template-columns:minmax(0,1fr) 26%;gap:11px}
 .creature-card.album-card .photo{aspect-ratio:.91;border-width:5px}
 .photo-strip{padding:5px;gap:6px}.photo-strip img{aspect-ratio:.78}
 .single-strip img{aspect-ratio:auto}
 .album-card .card-title{padding:10px;margin-top:13px;display:block}
 .album-card .card-title h3{font-size:19px}.album-card .card-title span{font-size:11px}
 .album-clip{right:18px;top:-20px;transform:rotate(11deg) scale(.72)}
 .order-link{font-size:12px;line-height:1.5;min-height:46px;padding-top:12px;gap:5px}
 .order-link svg{width:16px}
 .creature-grid.is-filtered .album-card .card-title{padding:7px 2px;background:none;margin-top:4px;min-height:87px}
 .creature-grid.is-filtered .album-card .card-title h3{font-size:14px}
 .creature-grid.is-filtered .album-card .photo-link{padding:9px}
 .custom-section{padding:65px 27px 73px;gap:35px}
 .custom-intro h2{font-size:36px}.custom-intro p{font-size:15px}
 .custom-section::before{width:10%;left:-15px;opacity:.8}
 .idea-paper{padding:38px 20px 25px 32px;transform:none;margin:0 0 0 3px}
 .idea-paper::before{inset:-10px -8px -13px -12px}
 .idea-paper::after{background:linear-gradient(90deg,transparent 19px,#d3288138 19px,#d3288138 20px,transparent 20px),var(--paper-texture) center/650px,var(--white)}
 .idea-paper h3{font-size:20px}.idea-paper label{font-size:13px}.form-intro{font-size:13px}
 .notebook-binding{left:-14px;top:28px;bottom:27px}.notebook-binding i{width:29px;height:13px;border-width:2px}
 .notebook-tab{right:-18px;top:24px;width:30px;height:47px;font-size:25px}
 .color-suggestions{gap:3px}.color-suggestions>span{width:100%;font-size:12px;margin-bottom:2px}
 .swatch{width:42px;height:44px}
 .direct-contact{font-size:12px}
 .about-section{padding:85px 27px 76px;gap:104px}
 .about-collage{width:calc(100% - 8px);padding-right:5px}
 .about-collage::before{inset:0 0 6px -6px}
 .about-photo.memory-camera{padding:12px 12px 15px;border-radius:21px}
 .camera-top{height:32px;padding:0 7px 7px}.camera-top .hand{font-size:16px}
 .camera-body{grid-template-columns:minmax(0,1fr) 22px;gap:8px}.camera-screen{padding:5px}.camera-screen img{aspect-ratio:1.42}
 .camera-dial{width:23px;height:23px;border-width:3px}
 .memory-controls{padding-right:25px;gap:12px;padding-top:10px}.memory-controls button{height:44px}
 .memory-camera figcaption{font-size:15px;margin:22px -3px -45px;padding:10px 8px}
 .camera-strap{right:-19px;width:30px;height:95px;border-width:5px}
 .about-stamp{right:-4px;bottom:-74px;width:82px;height:82px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.photo-link,.memory-controls button{transition:none}.photo-link:hover,.memory-controls button:hover{transform:none}}
html[data-input=keyboard] .memory-controls button{transition:none}