/* A taped page from the same sketchbook as the rest of JustOneMoreTab. */
.tiny-jigsaw{position:relative;isolation:isolate;max-width:480px;margin:30px auto 56px;padding:28px 22px 18px;background:#fffdf5;background-image:radial-gradient(#b5a78625 .65px,transparent .8px);background-size:9px 11px;border:2px solid transparent;border-radius:16px 10px 19px 9px;box-shadow:5px 6px 0 #ede7d7;text-align:center}
.tiny-jigsaw::before{content:'';position:absolute;z-index:2;top:-16px;left:calc(50% - 58px);width:116px;height:32px;background:repeating-linear-gradient(93deg,#fff0ba30 0 3px,#d2b45d14 4px 5px),#f4d983c9;border-top:1px solid #c7ad6055;border-bottom:1px solid #c7ad6055;clip-path:polygon(2% 0,98% 2%,96% 14%,100% 26%,97% 39%,100% 55%,97% 68%,99% 84%,97% 100%,1% 98%,3% 84%,0 69%,3% 55%,0 41%,3% 26%,0 13%);transform:rotate(-5deg);pointer-events:none}
.tiny-jigsaw::after{content:'';position:absolute;inset:-2px;background:url('./assets/jigsaw-sketch-frame.svg') center/100% 100% no-repeat;pointer-events:none;z-index:1}
.tiny-jigsaw h2{font:700 clamp(25px,3vw,30px)/1.06 var(--hand);margin:8px auto 10px;max-width:450px;transform:rotate(-.6deg)}
.tiny-jigsaw .blog-kicker{font-size:15px;color:#176bf4}
.tiny-jigsaw p{font-size:13px;line-height:1.4;max-width:400px;margin:10px auto 16px}
.jigsaw-board{display:grid;grid-template-columns:repeat(5,1fr);aspect-ratio:3/2;background:#f9f6e9;background-image:repeating-linear-gradient(0deg,transparent 0 23px,#c8d7dc50 24px,transparent 25px);border:2px solid #52554a;border-radius:4px 7px 3px 6px;position:relative;isolation:isolate;box-shadow:2px 3px 0 #e5dfca}
.jigsaw-board::before{content:'';position:absolute;inset:0;background:url('./assets/jigsaw-cottage-sketch.webp') center/100% 100%;opacity:0;z-index:-1}
.jigsaw-board.peek::before{opacity:.7}
.jigsaw-board button{position:relative;border:1px dashed #8a8d7760;background:transparent;min-width:0;padding:0;cursor:pointer}
.jigsaw-board button:not(.placed):hover{background:#ffdf6c2b}
.jigsaw-board button.placed{border-color:transparent}
.jigsaw-board svg,.jigsaw-tray svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.jigsaw-tray{display:grid;grid-template-columns:repeat(5,1fr);gap:15px 22px;padding:22px 8px 16px}
.jigsaw-tray button{aspect-ratio:3/5;max-height:68px;width:100%;min-width:0;padding:0;border:0;background:none;cursor:grab;touch-action:none;position:relative;filter:drop-shadow(1px 2px 0 #635f3c38);rotate:-3deg}
.jigsaw-tray button:nth-child(3n){rotate:4deg}
.jigsaw-tray button:nth-child(3n + 2){rotate:1deg}
.jigsaw-tray button:disabled{visibility:hidden}
.complete .jigsaw-tray{display:none}
.jigsaw-tray button[aria-pressed=true]{outline:3px solid #176bf4;outline-offset:6px;z-index:2}
.jigsaw-tray button.dragging{z-index:5;pointer-events:none;cursor:grabbing;rotate:0deg}
.tiny-jigsaw button:focus-visible{outline:3px solid #176bf4;outline-offset:4px;z-index:3}
.jigsaw-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.jigsaw-controls strong{flex-basis:100%;font:400 18px/1.25 var(--hand);color:#444b3a;min-height:48px;padding-top:6px}
.tiny-jigsaw .pill{position:relative;font:18px/1.1 var(--hand);min-height:44px;padding:8px 14px;border:1.7px solid #41453c;border-radius:8px 12px 7px 10px;background:#fffefa;box-shadow:2px 3px 0 #e8dfc4;transform:rotate(1deg)}
.tiny-jigsaw #jigsaw-peek{background:#fff0b3;transform:rotate(-1.5deg)}
.tiny-jigsaw .pill:hover{background:#ffe48b;box-shadow:1px 2px 0 #d9cfb3}
.tiny-jigsaw #jigsaw-peek[aria-pressed=true]{background:#ffdc68}
.article-hero:has(+ .tiny-jigsaw){grid-template-columns:1fr}
@media(max-width:600px){.tiny-jigsaw{padding:26px 14px 16px;margin-bottom:32px;box-shadow:3px 4px 0 #ede7d7}.jigsaw-tray{grid-template-columns:repeat(5,1fr);gap:15px 20px;padding:20px 8px}.jigsaw-tray button{max-height:62px;width:100%}.tiny-jigsaw p{font-size:13px}.tiny-jigsaw h2{font-size:26px}.jigsaw-controls{gap:10px}.tiny-jigsaw .pill{font-size:18px;padding:9px 13px}.jigsaw-controls strong{font-size:18px}}


/* Six small visitors to the article margins. */
.jigsaw-article :is(.article-contents,.article-practical,.article-ending){position:relative}
.jigsaw-doodle{position:absolute;width:108px;height:108px;object-fit:contain;top:28px;pointer-events:none}
.jigsaw-doodle.right{right:-128px;transform:rotate(7deg)}
.jigsaw-doodle.left{left:-128px;transform:rotate(-7deg)}
@media(max-width:1100px){.jigsaw-doodle{position:static;display:block;width:82px;height:82px;margin:0 0 12px}.jigsaw-doodle.right{margin-left:auto}.jigsaw-doodle.left{margin-right:auto}}
@media(max-width:480px){.jigsaw-doodle{width:70px;height:70px;margin-bottom:10px}}