.work-canvas-section{padding:18px 5% 50px;background:radial-gradient(ellipse at 50% 25%,#eee6d5,#faf7f0 75%)}
.work-canvas-frame{max-width:1400px;margin:auto;padding:13px;background:linear-gradient(130deg,#352a1c,#a98441 4%,#e9d3a0 5%,#8a642c 6%,#2b2319 7%,#b5904d 97%,#342616);box-shadow:0 20px 35px #36271135,0 3px 4px #251a1538,inset 0 1px 1px #fff9;border-radius:3px}
.work-canvas{position:relative;isolation:isolate;padding:28px;background:url('assets/story-paper-grain.svg'),repeating-linear-gradient(0deg,#a8936b09 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#a8936b0b 0 1px,transparent 1px 4px),#f3ecd9;box-shadow:inset 0 0 24px #725c3f33}
.work-canvas:before{content:"";position:absolute;inset:10px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 0 40%,#b78a3e28,transparent 35%),radial-gradient(ellipse at 100% 70%,#b78a3e26,transparent 35%)}
.work-canvas-heading{text-align:center;padding:0 0 24px;color:#785521}
.work-canvas-heading span{font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.work-canvas-heading p{font:italic 25px/1.3 Georgia,serif;color:#45351f;margin:8px 0 0}
.work-canvas .photo-grid{display:block;columns:4;column-gap:17px}
.work-canvas .photo{display:inline-block;width:100%;break-inside:avoid;aspect-ratio:auto;overflow:hidden;margin:0 0 17px;padding:6px;background:#fffaf0;border:1px solid #b99d643f;border-radius:2px;box-shadow:0 5px 9px #624b2226;transform:none;transition:transform .3s,box-shadow .3s;vertical-align:top}
.work-canvas .photo img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;filter:none;border-radius:1px;transition:filter .3s}
.work-canvas .photo span{position:static;display:flex;justify-content:space-between;gap:10px;padding:9px 4px 3px;background:none;border:0;color:#5e4928;font-size:10px;line-height:1.4;text-align:left;letter-spacing:.035em}
.work-canvas .photo:focus-visible{outline:3px solid #9b702b;outline-offset:4px}
.work-canvas-hint{text-align:center;margin:24px 0 0;font-size:12px;color:#77694e}
@media(hover:hover){.work-canvas .photo:hover{position:relative;z-index:3;transform:translateY(-4px) scale(1.025);box-shadow:0 12px 20px #4a361b38}.work-canvas .photo:hover img{filter:saturate(1.08)}}
#work-paint-intro{display:none}
html.work-paint-active{overflow:hidden}
.work-paint-active #work-paint-intro{position:fixed;inset:0;z-index:32000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 6%;background:radial-gradient(ellipse at 50% 50%,#302b21,#0b0c0a 78%);color:#f4e9d0;transition:opacity .6s,visibility .6s}
.work-paint-title{text-align:center;margin-bottom:20px}
.work-paint-title>span{font-size:10px;letter-spacing:.4em;color:#d0af69}
.work-paint-title p{font:400 clamp(30px,4vw,52px)/1.15 Georgia,serif;margin:9px 0 0}
.work-paint-title em{color:#d5b46f}
.work-paint-stage{width:min(980px,85vw);max-height:64svh;aspect-ratio:1000/600;padding:10px;background:linear-gradient(130deg,#644721,#eed59d 25%,#8e652c 50%,#dbb66b 75%,#674821);box-shadow:0 30px 60px #0009,inset 0 1px 1px #fff9}
.work-paint-stage>svg{display:block;width:100%;height:100%;background:#f1e8d6}
.work-paint-note{font:italic 17px/1.4 Georgia,serif;color:#d4c4a4;margin:20px 0 0}
.work-paint-skip{position:absolute;right:25px;bottom:22px;border:1px solid #d2b16b88;background:#181810;color:#f2e3c2;border-radius:30px;padding:12px 18px;font:12px/1.3 inherit;cursor:pointer}
.work-paint-skip:focus-visible{outline:3px solid #e6c373;outline-offset:4px}
.work-paint-active #work-paint-intro.work-paint-done{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:850px){.work-canvas .photo-grid{columns:3}.work-canvas{padding:20px}}
@media(max-width:600px){.work-canvas-section{padding:10px 4% 35px}.work-canvas-frame{padding:8px}.work-canvas{padding:14px}.work-canvas .photo-grid{columns:2;column-gap:10px}.work-canvas .photo{padding:4px;margin-bottom:10px}.work-canvas .photo span{font-size:9px;padding:7px 2px 3px}.work-canvas-heading{padding-bottom:17px}.work-canvas-heading span{font-size:8px;letter-spacing:.1em}.work-canvas-heading p{font-size:21px}.work-paint-stage{width:94vw;padding:7px;aspect-ratio:1000/700}.work-paint-note{font-size:15px}.work-canvas-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){.work-canvas .photo,.work-canvas .photo img{transition:none}.work-canvas .photo:hover{transform:none}.work-paint-active #work-paint-intro{display:none}html.work-paint-active{overflow:auto}}

/* The entire viewport is the opening canvas, before any page photos appear. */
.work-paint-active #work-paint-intro{padding:0;display:block;background:#e8dfcb;transition:opacity .65s ease,visibility .65s ease;overflow:hidden}
.work-paint-title,.work-paint-note{display:none}
.work-paint-stage{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;padding:0;background:#e8dfcb;box-shadow:none;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.work-paint-stage>svg{width:100%;height:100%;background:#e8dfcb}
.work-paint-stage:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #34291830;pointer-events:none}
.work-paint-skip{z-index:3;right:24px;bottom:24px;background:#11150edb;border-color:#dfc4879c;box-shadow:0 4px 18px #0003;backdrop-filter:blur(8px);font:12px/1.3 Arial,sans-serif}
.work-paint-done .work-paint-stage{transform:scale(1.045)}
@media(max-width:600px){.work-paint-stage{width:100%;height:100%;padding:0;aspect-ratio:auto}.work-paint-skip{right:16px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.work-paint-stage{transition:none}.work-paint-active #work-paint-intro{display:none}}

/* Preserve original photo colors throughout the painted collage. */
.work-paint-stage:after{box-shadow:none}

/* Dimensional brush only: layered edge thickness, tilted face, moving light and lifted shadow. */
.work-brush-3d{position:absolute;z-index:2;left:0;top:0;width:354px;height:118px;transform-origin:30px 59px;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.work-brush-3d>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none;backface-visibility:hidden}
.work-brush-cast-shadow{transform:translate3d(7px,17px,-24px);filter:brightness(0) blur(6px);opacity:.42}
.work-brush-depth{filter:brightness(.42) saturate(.7)}
.work-brush-face{filter:contrast(1.05) saturate(1.03)}
.work-brush-gleam{position:absolute;inset:0;transform:translateZ(2px);background:linear-gradient(115deg,transparent 19%,#fff4cf70 35%,#fff4cf12 48%,transparent 60%);background-size:230% 100%;mask:url('assets/realistic-paintbrush.webp') center/contain no-repeat;-webkit-mask:url('assets/realistic-paintbrush.webp') center/contain no-repeat;mix-blend-mode:screen;opacity:.45;animation:workBrushLight 4.05s ease-in-out both;pointer-events:none}
@keyframes workBrushLight{0%{background-position:100% 50%}50%{background-position:25% 50%}100%{background-position:85% 50%}}
@media(prefers-reduced-motion:reduce){.work-brush-gleam{animation:none}}

/* A cork pinboard of small printed memories, inspired by the chosen reference. */
.pinboard-frame{max-width:1320px;padding:17px;border:1px solid #b69c74;border-radius:4px;background:repeating-linear-gradient(1deg,#b89a70 0 2px,#ceb58e 3px 6px,#c5a77f 7px 10px);box-shadow:inset 0 2px 2px #fff9,inset 0 -3px 3px #69533280,0 20px 40px #46351b40}
.work-canvas.community-pinboard{padding:28px 4% 42px;background:url('assets/community-cork.svg') repeat;box-shadow:inset 0 5px 12px #5b3e274d}
.community-pinboard:before{display:none}
.community-pinboard .work-canvas-heading{position:relative;padding-bottom:30px}
.community-pinboard .work-canvas-heading span{color:#3e2e1b;font-weight:600}
.community-pinboard .work-canvas-heading p{display:table;margin:10px auto 0;padding:8px 22px;background:#fff8e8;box-shadow:0 3px 5px #61451f33;transform:rotate(-1deg);font:italic 27px/1.25 'Segoe Print','Bradley Hand',Georgia,serif;color:#29271e}
.community-pinboard .photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));columns:auto;gap:27px 23px;align-items:start;padding:8px 0 0}
.community-pinboard .pinboard-print{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:auto;min-width:0;padding:10px 10px 8px;margin:0;background:linear-gradient(120deg,#fffdf8,#f4efe4);border:0;border-radius:1px;overflow:visible;box-shadow:1px 6px 8px #4a311e55;transform:rotate(-5deg);transition:transform .3s ease,box-shadow .3s ease}
.community-pinboard .pinboard-print:nth-child(4n+2){transform:rotate(4deg);margin-top:9px}
.community-pinboard .pinboard-print:nth-child(4n+3){transform:rotate(-2deg);margin-top:1px}
.community-pinboard .pinboard-print:nth-child(4n){transform:rotate(6deg);margin-top:12px}
.community-pinboard .pinboard-print:nth-child(9){grid-column:2;transform:rotate(3deg)}
.community-pinboard .pinboard-print:nth-child(10){grid-column:3;transform:rotate(-4deg)}
.community-pinboard .pinboard-print img{display:block;width:100%;height:auto;aspect-ratio:1.12;object-fit:contain;background:#e8e5de;filter:none;border-radius:0;transform:none}
.community-pinboard .pinboard-print:nth-child(3n+2) img{aspect-ratio:1}
.community-pinboard .pinboard-print>span{position:static;display:flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:10px 2px 3px;font:italic 17px/1.2 'Segoe Print','Bradley Hand',Georgia,serif;letter-spacing:0;text-align:center;color:#25251e;background:none;border:0}
.community-pinboard .pinboard-print>span b{font:400 12px/1 Arial,sans-serif;opacity:.5}
.pinboard-tape{position:absolute;z-index:3;left:calc(50% - 25px);top:-13px;width:50px;height:24px;transform:rotate(-8deg);background:repeating-linear-gradient(85deg,#eee5c17a 0 2px,#f4eccb99 2px 4px);box-shadow:0 1px 1px #6a4f201a;clip-path:polygon(0 4%,8% 0,16% 4%,25% 1%,33% 4%,44% 0,52% 4%,64% 0,73% 4%,84% 0,92% 4%,100% 0,98% 100%,87% 97%,76% 100%,65% 96%,54% 100%,43% 96%,32% 100%,21% 96%,10% 100%,0 96%);pointer-events:none}
.pinboard-print:nth-child(3n) .pinboard-tape{top:-9px;left:12px;transform:rotate(-32deg)}
.work-photo-viewer{width:min(1100px,95vw);height:auto;max-height:92svh;padding:52px 60px 25px;overflow:auto;background:#11120f;border:1px solid #a38850;border-radius:4px;color:#f6eddb;box-shadow:0 24px 80px #000a}
.work-photo-viewer>img{display:block;width:100%;height:auto;max-height:62svh;object-fit:contain;margin:0 auto;background:transparent}
.work-photo-viewer .photo-story{max-width:760px;margin:21px auto 0;text-align:left}
.work-photo-viewer .photo-title{font:400 28px/1.2 Georgia,serif;margin:0 0 10px;color:#dfc58d}
.work-photo-viewer .photo-description{font-size:15px;line-height:1.7;margin:0;color:#eee7d9}
.work-photo-viewer .photo-counter{position:static;font-size:11px;letter-spacing:.13em;text-align:center;margin:18px 0 0;color:#c6b894}
.work-photo-viewer .close{top:9px;right:12px}
.work-photo-viewer .previous,.work-photo-viewer .next{position:absolute;top:min(36svh,320px)}
@media(hover:hover){.community-pinboard .pinboard-print:hover{z-index:5;transform:translateY(-7px) rotate(0) scale(1.06);box-shadow:2px 17px 23px #4a311e55}.community-pinboard .pinboard-print:hover img{filter:none;transform:none}}
.community-pinboard .pinboard-print:focus-visible{z-index:5;transform:rotate(0) scale(1.04);outline:3px solid #45351f;outline-offset:5px}
@media(max-width:1000px){.community-pinboard .photo-grid{gap:25px 17px}.community-pinboard .pinboard-print{padding:8px 8px 5px}.community-pinboard .pinboard-print>span{font-size:14px}}
@media(max-width:700px){.pinboard-frame{padding:10px}.work-canvas.community-pinboard{padding:25px 6% 32px}.community-pinboard .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}.community-pinboard .pinboard-print:nth-child(9),.community-pinboard .pinboard-print:nth-child(10){grid-column:auto}.community-pinboard .pinboard-print>span{font-size:14px;min-height:41px}.community-pinboard .work-canvas-heading p{font-size:21px;padding:9px 13px}.community-pinboard .work-canvas-heading span{font-size:8px}.work-photo-viewer{padding:50px 35px 22px;max-height:94svh}.work-photo-viewer>img{max-height:54svh}.work-photo-viewer .photo-title{font-size:24px}.work-photo-viewer .photo-description{font-size:14px}.work-photo-viewer .previous{left:1px}.work-photo-viewer .next{right:1px}}
@media(prefers-reduced-motion:reduce){.community-pinboard .pinboard-print{transition:none}.community-pinboard .pinboard-print:hover,.community-pinboard .pinboard-print:focus-visible{transform:none}}