.vision-board{--board-cream:#fffdf4;--board-note:#eee3cb;--board-ink:#344f43;position:relative;isolation:isolate;width:100%;aspect-ratio:1.43;container-type:inline-size;padding:2.3%;border-radius:3px;background:#b98858;box-shadow:0 16px 35px #344f4320,0 2px 5px #344f4326,inset 0 0 0 2px #e8c59b,inset 0 0 0 5px #85572e30;overflow:visible;box-sizing:border-box}
.vision-board.background-cork{background:repeating-linear-gradient(2deg,#b88b60 0,#c5996a 3px,#b18457 5px,#c9a274 8px,#bd9166 11px)}
.vision-board.background-white{padding:2%;background:#e0e4dc;box-shadow:0 15px 36px #344f431c,inset 0 0 0 1px #b9c5bb}
.vision-board.background-linen{background:#c8bcaa;box-shadow:0 15px 36px #344f431c,inset 0 0 0 2px #aa9c87}
.board-surface{position:relative;width:100%;height:100%;overflow:hidden;background-color:#c9a16f;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.24' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:inset 0 1px 6px #67442b66}
.background-white .board-surface{background:#f7f8f3;box-shadow:inset 0 0 4px #52645520}
.background-linen .board-surface{background-color:#e2dccb;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#857f6817 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#ffffff60 2px 3px);box-shadow:inset 0 0 6px #85735440}
.vision-board.palette-pastel{--board-note:#e1eadf;--board-cream:#fffaf1}
.vision-board.palette-vivid{--board-note:#f5db6b;--board-cream:#fffaf0}
.board-photo,.board-note{position:absolute;left:var(--left);top:var(--top);width:var(--width);height:var(--height);transform:rotate(var(--turn));box-sizing:border-box;margin:0;box-shadow:1px 3px 7px #263b3040}
.board-photo{padding:1.1% 1.1% 2%;background:#fffef8;z-index:2;transition:transform .45s ease,box-shadow .45s ease}
.board-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;filter:saturate(.85) contrast(.97);background:#d0d7cb}
.palette-pastel .board-photo img{filter:saturate(.65) contrast(.91) brightness(1.07)}
.palette-vivid .board-photo img{filter:saturate(1.17) contrast(1.02)}
.board-tape{position:absolute;left:38%;top:-3%;width:24%;height:8%;background:#e3cda7b5;transform:rotate(-5deg);z-index:3;clip-path:polygon(3% 0,97% 3%,100% 96%,0 100%);box-shadow:0 1px 1px #7c705614}
.board-photo-2 .board-tape{background:#f2d975ad;transform:rotate(7deg)}
.board-photo-4 .board-tape{background:#bac9b6bd;transform:rotate(-7deg)}
.board-photo-5 .board-tape{display:none}
.board-note{z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.8% 1.2%;color:var(--board-ink);background:var(--board-cream);font-size:3.9cqw;font-family:Caveat,'Segoe Print',cursive;line-height:1.12}
.board-note-copy{display:block;white-space:pre-wrap;overflow-wrap:anywhere;width:100%;font-size:var(--copy-font,1em);flex-shrink:0}
.board-year-number{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15em;line-height:1;margin-bottom:.15em;letter-spacing:.03em}
.board-year-number+.board-note-copy{font-size:var(--copy-font,.77em)}
.board-note-wishes{background:var(--board-note);font-size:3cqw;padding:2.2% 1%}
.board-note-wishes .board-note-copy{line-height:1.28}
.board-note-quote{font-size:4.4cqw}
.note-pin{position:absolute;left:48%;top:4%;width:5px;height:5px;border-radius:50%;background:#7a775a;box-shadow:1px 1px 2px #0004;opacity:.6}
.board-note-quote .note-pin{display:none}
.board-sprig{position:absolute;right:2%;top:2%;width:9%;height:27%;border-right:2px solid #61764b;transform:rotate(32deg);z-index:6;pointer-events:none}
.board-sprig i{position:absolute;right:-4%;width:67%;height:19%;background:#56704c;border-radius:2% 95% 8% 95%;box-shadow:inset -3px -2px 0 #2d4b3024}
.board-sprig i:nth-child(1){top:1%;transform:rotate(-28deg)}
.board-sprig i:nth-child(2){top:17%;right:-58%;transform:scaleX(-1) rotate(-30deg);background:#80936a}
.board-sprig i:nth-child(3){top:33%;transform:rotate(-28deg);background:#82936c}
.board-sprig i:nth-child(4){top:48%;right:-58%;transform:scaleX(-1) rotate(-30deg)}
.board-sprig i:nth-child(5){top:65%;transform:rotate(-28deg)}
.board-sprig i:nth-child(6){top:78%;right:-58%;transform:scaleX(-1) rotate(-30deg);background:#7f956b}
.sprig-two{left:0;right:auto;top:75%;height:23%;width:8%;transform:rotate(-57deg) scale(.9)}
.composition-structured .board-note{font-size:2.8cqw;padding:.4% 1%;box-shadow:none;background:transparent}
.composition-structured .board-note-year{flex-direction:row;gap:.35em}
.composition-structured .board-note-year .board-note-copy{white-space:normal;text-align:left;width:61%;max-width:61%;flex:0 0 61%}
.composition-structured .board-note-year>.board-year-number{font-size:1.5em;min-width:0;flex:1}
.composition-structured .board-note-quote{font-size:3.5cqw}
.composition-structured .board-note-wishes{font-size:2.3cqw;background:var(--board-note)}
.composition-structured .board-note-wishes .board-note-copy{white-space:normal}
.composition-structured .note-pin,.composition-structured .board-sprig{display:none}
.composition-structured .board-photo{box-shadow:0 2px 4px #263b302a}
.composition-free .board-photo{box-shadow:2px 5px 9px #263b3050}
.composition-free .board-note{box-shadow:2px 4px 7px #263b3045}
.orientation-portrait{aspect-ratio:.75;padding:3%}
.orientation-portrait .board-photo{padding:1.5% 1.5% 3%}
.orientation-portrait .board-note{font-size:5.8cqw}
.orientation-portrait .board-note-quote{font-size:6.7cqw}
.orientation-portrait .board-note-wishes{font-size:4.3cqw}
.orientation-portrait .board-sprig{top:0;right:1%;height:17%;width:12%}
.orientation-portrait .sprig-two{top:76%;height:18%;left:0;right:auto}
.orientation-portrait.composition-structured .board-note{font-size:3.5cqw}
.orientation-portrait.composition-structured .board-note-quote{font-size:4.5cqw}
.orientation-portrait.composition-structured .board-note-wishes{font-size:3.1cqw}
.board-compact{pointer-events:none}
@media(prefers-reduced-motion:reduce){.board-photo{transition:none}}

/* A material, a composition and a colour story: three visible choices. */
.vision-board{--board-paper-year:#fffdf1;--board-paper-quote:#f5ebda;--board-note:#dfcca5;--board-tape-one:#c7b68eaa;--board-tape-two:#8d9e82aa;--board-tape-three:#dfcc9eaa;--board-frame-one:#fffdf5;--board-frame-two:#fffdf5;--board-frame-three:#fffdf5;--board-photo-filter:saturate(.82) contrast(.98);border-radius:4px;box-shadow:0 19px 35px #344f4322,0 2px 5px #344f4328}
.vision-board.background-cork{background:repeating-linear-gradient(1deg,#b78959 0,#ca9b6b 2px,#b4875c 3px,#dab184 4px,#ba8f63 7px,#c49a70 10px);box-shadow:0 19px 35px #344f4322,inset 0 0 0 1px #b38452,inset 0 0 0 3px #f5d9af88,inset 0 0 0 5px #986d43aa}
.background-cork .board-surface{background-color:#c7a476;background-image:radial-gradient(#72502d55 .65px,transparent .8px),radial-gradient(#f5dfbc88 .7px,transparent 1px),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E");background-size:5px 6px,7px 9px,160px 160px;box-shadow:inset 0 2px 7px #64412377}
.vision-board.background-white{background:linear-gradient(135deg,#f7f9f7,#d5dfd9 50%,#f4f7f4);box-shadow:0 17px 35px #344f4322,inset 0 0 0 1px #bdc9c0,inset 0 0 0 4px #f9fdfa99}
.background-white .board-surface{background:radial-gradient(ellipse at 25% 10%,#ffffff,#f8faf7 65%,#f0f4ef);box-shadow:inset 0 0 0 1px #e4e9e0}
.vision-board.background-linen{background:#c8bea7;box-shadow:0 18px 34px #344f4320,inset 0 0 0 1px #a99e85,inset 0 0 0 3px #e2d8c1;}
.background-linen .board-surface{background-color:#eee6d4;background-image:repeating-linear-gradient(0deg,#a99b7a18 0px,#a99b7a18 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,#fffdf6bb 0px,#fffdf6bb 1px,#b9ad921c 1px,#b9ad921c 2px,transparent 2px,transparent 4px);box-shadow:inset 0 0 9px #85735430}
.vision-board.palette-pastel{--board-paper-year:#f4d3c5;--board-paper-quote:#e2dbef;--board-note:#cde0d5;--board-tape-one:#efb9c5cc;--board-tape-two:#b4d3c9cc;--board-tape-three:#d1bee5cc;--board-frame-one:#fff8ef;--board-frame-two:#faf3fb;--board-frame-three:#eff7f1;--board-photo-filter:saturate(.68) contrast(.94) brightness(1.06)}
.vision-board.palette-vivid{--board-paper-year:#f4d35f;--board-paper-quote:#ee9b88;--board-note:#345044;--board-tape-one:#f4d35fdd;--board-tape-two:#db896cdd;--board-tape-three:#597163dd;--board-frame-one:#fff9e7;--board-frame-two:#fff3ec;--board-frame-three:#eff4e8;--board-photo-filter:saturate(1.22) contrast(1.03)}
.board-photo{background:var(--board-frame-one);box-shadow:1px 3px 6px #263b3033,0 8px 14px #263b3014}
.board-photo:nth-child(3n+2){background:var(--board-frame-two)}
.board-photo:nth-child(3n){background:var(--board-frame-three)}
.vision-board .board-photo img{filter:var(--board-photo-filter)}
.vision-board .board-tape{background:var(--board-tape-one);opacity:.93}
.vision-board .board-photo-2 .board-tape,.vision-board .board-photo-5 .board-tape{background:var(--board-tape-two)}
.vision-board .board-photo-4 .board-tape{background:var(--board-tape-three)}
.board-note-year{background:var(--board-paper-year)}
.board-note-quote{background:var(--board-paper-quote)}
.vision-board .board-note-wishes{background:var(--board-note)}
.palette-vivid .board-note-wishes{color:#fffaf0}
.palette-vivid .board-note-wishes .note-pin{background:#e8c65d;opacity:1}
.palette-pastel .board-sprig i{background:#8ba18a}
.composition-structured .board-photo{padding:1% 1% 1.7%;box-shadow:0 2px 5px #263b3022}
.composition-structured .board-tape{display:none}
.composition-structured .board-note-year{background:var(--board-paper-year);border-radius:1px}
.composition-structured .board-note-quote{background:var(--board-paper-quote);border-radius:1px}
.composition-structured .board-note-wishes{border-radius:1px}
.composition-free .board-photo{box-shadow:2px 5px 10px #263b304b}
.composition-free .board-photo-1{z-index:2}
.composition-free .board-photo-4{z-index:3}
.composition-free .board-note-quote{clip-path:polygon(1% 2%,98% 0,100% 95%,96% 100%,3% 96%,0 100%)}
.composition-free .board-tape{width:30%;left:32%;height:9%}
.composition-organic .board-photo{box-shadow:1px 3px 7px #263b303a}
.board-note,.board-sprig,.board-tape,.photo-border{pointer-events:none}
.board-photo-select{position:absolute;z-index:4;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;display:block;cursor:pointer;color:#345044}
.board-photo-select:focus-visible{outline:3px solid #f4d35f;outline-offset:2px;box-shadow:0 0 0 5px #345044}
.board-edit-indicator{position:absolute;right:6%;bottom:9%;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:4px;background:#fffdf3f2;color:#345044;padding:4px 6px;box-shadow:0 1px 4px #132d2433;font:600 clamp(8px,1.2cqw,11px)/1.1 'DM Sans',sans-serif;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;white-space:nowrap}
.board-edit-indicator svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.board-photo:hover .board-edit-indicator,.board-photo-select:focus-visible .board-edit-indicator,.photo-selected .board-edit-indicator{opacity:1;transform:translateY(0)}
.photo-selected{outline:3px solid #f4d35f;outline-offset:2px}
.board-compact .board-photo-select{display:none}
@media(hover:none){.board-editable .board-edit-indicator{opacity:1;transform:none;padding:3px 5px}.board-edit-indicator svg{width:11px;height:11px}}
@media(prefers-reduced-motion:reduce){.board-edit-indicator{transition:none}}

/* The frame dresses the outside of a fixed-ratio master; it never crops or
   recomposes the photo/text surface. Linen always remains unframed. */
.vision-board.board-framed,.vision-board.board-unframed{aspect-ratio:auto;padding:2.5%;height:auto}
.vision-board.board-unframed,.vision-board.background-linen{padding:0;background:transparent;box-shadow:0 17px 32px #344f4322;border-radius:2px}
.vision-board .board-surface{height:auto;aspect-ratio:1.43;container-type:inline-size}
.vision-board.orientation-portrait .board-surface{aspect-ratio:.75}
.vision-board.board-unframed .board-surface{box-shadow:none}
.vision-board.background-linen .board-surface{background-color:#e2d6bd;box-shadow:none}
.vision-board.background-cork .board-surface{background-color:#c49b6f}
.vision-board.background-white .board-surface{background-color:#f8f7f1;background-image:repeating-linear-gradient(0deg,#a29c850b 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff80 0 1px,transparent 1px 3px)}
.vision-board.background-white.board-framed{background:linear-gradient(135deg,#fffef9,#f1f0e9 50%,#deddd5);box-shadow:0 17px 35px #344f4322,inset 0 0 0 1px #c9c8bf,inset 0 0 0 4px #fffef999}