/* scrapbook.css */
.clipping-dialog { width:min(1000px,calc(100vw - 28px)); max-height:calc(100svh - 28px); padding:clamp(20px,4.5vw,46px); border:12px ridge #b9c0c4; border-radius:9px; background:#7d6446 url('../../assets/cork-board.webp') center / cover; box-shadow:inset 0 0 7px #45565b35,0 25px 100px #0009; color:#302b25; overflow:hidden; }
.clipping-dialog::backdrop { background:#161711ad; backdrop-filter:blur(4px); }
.clipping-stage { position:relative; display:flex; justify-content:center; }
.clipping-pinned { position:relative; max-width:100%; cursor:grab; touch-action:pan-y; user-select:none; }
.clipping-pinned::before { content:''; position:absolute; z-index:3; left:calc(50% - 11px); top:-11px; width:22px; height:22px; border-radius:50%; border:1px solid #851b1c; background:radial-gradient(circle at 35% 25%,#e49387,#a82c2d 65%,#672326); box-shadow:1px 3px 3px #17271f60; pointer-events:none; }
#clipping-full-image { display:block; max-width:100%; max-height:68svh; width:auto; height:auto; margin:auto; object-fit:contain; box-shadow:1px 3px 5px #25322e2a; -webkit-user-drag:none; }
.clipping-ghost { position:absolute; z-index:5; margin:0; pointer-events:none; }
@media(max-width:650px) {
.clipping-dialog { padding:22px; border-width:8px; }
}

/* desk-v2.css */
.stage .quote-board { width:110%; max-width:285px; transform:rotate(3deg); }
.quote-board .object-photo { aspect-ratio:3/2; }
@media(max-width:650px) {
.stage .quote-board { grid-column:1 / span 2; }
}
.object-dialog[data-room="board"] { width:min(1030px,calc(100vw - 24px)); background:transparent; border:0; border-radius:4px; box-shadow:none; }
[data-room="board"] .dialog-inner { padding:0; }
[data-room="board"] .dialog-head { position:absolute; z-index:5; right:23px; top:24px; margin:0; }
[data-room="board"] .dialog-head > div { display:none; }
.dry-erase-board { border:14px ridge #b9c0c4; border-radius:9px; padding:35px 38px 25px; background:linear-gradient(125deg,#fff,#f8faf9 60%,#ecf0ef); box-shadow:inset 0 0 7px #45565b35,0 20px 50px #10221c66; }
.board-title { margin:0 50px 20px 0; font:italic 27px/1.25 Georgia,serif; color:#254a58; }
#board-room .scrapbook-spread { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; padding:30px 0; min-height:390px; }
#board-room .quote-clipping { transform:rotate(-2deg); }
#board-room .companion-clipping { width:100%; margin:25px 0 0; transform:rotate(3deg); }
#board-room .paper-tape,#board-room .companion-clipping::before { width:20px; height:20px; border-radius:50%; left:calc(50% - 10px); top:-10px; border:1px solid #851b1c; background:radial-gradient(circle at 35% 25%,#e49387,#a82c2d 65%,#672326); box-shadow:1px 3px 3px #17271f60; transform:none; }
#board-room .companion-clipping::before { background:radial-gradient(circle at 35% 25%,#b3d3d9,#366874 65%,#244651); border-color:#234650; z-index:2; }
@media(max-width:700px) {
.dry-erase-board { padding:26px 22px 18px; border-width:10px; }
.board-title { font-size:23px; }
#board-room .scrapbook-spread { grid-template-columns:1fr; gap:16px; min-height:0; }
#board-room .companion-clipping { width:90%; margin-left:auto; }
[data-room="board"] .dialog-head { top:18px; right:15px; }
}

/* interactions.css */
.object-dialog[data-room="board"] { width:min(1200px,calc(100vw - 20px)); overflow:hidden; }
.dry-erase-board { padding:22px 20px 10px; }
.board-title { font-size:23px; margin:0 60px 18px 9px; }
.board-viewport { position:relative; width:100%; height:min(68svh,660px); min-height:280px; overflow:auto; overscroll-behavior:contain; cursor:grab; scrollbar-width:thin; scrollbar-color:#bdc5c4 transparent; touch-action:pan-x pan-y; }
.board-viewport.is-dragging,.board-viewport.is-dragging * { cursor:grabbing; user-select:none; }
.board-space { position:relative; }
.board-canvas { display:grid; grid-template-columns:repeat(4,350px); gap:48px; align-items:center; width:1744px; padding:85px 100px; transform-origin:0 0; }
.board-clipping { position:relative; display:block; width:350px; border:0; padding:25px 23px; color:#37332c; background:linear-gradient(115deg,#f0e7d3,#fffdf5 45%,#f3eee3); font:700 23px/1.23 'Times New Roman',serif; text-align:left; cursor:pointer; box-shadow:1px 3px 5px #25322e2a; transform:rotate(var(--tilt)); transition:box-shadow .25s; }
.board-clipping:nth-child(3n) { background:#fffef9; }
.board-clipping:nth-child(5n) { background:#e8decb; }
.board-clipping::before { content:''; position:absolute; left:48%; top:-9px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#efb2a0,#af423b 65%,#662826); box-shadow:1px 3px 3px #27382d55; }
.board-clipping:nth-child(even)::before { background:radial-gradient(circle at 35% 25%,#b9d5de,#417381 65%,#254951); }
.board-clipping:nth-child(3n)::before { background:radial-gradient(circle at 35% 25%,#ede19a,#b6a64c 65%,#756620); }
.board-clipping:hover,.board-clipping.is-selected { box-shadow:2px 6px 12px #25322e3d; }
.board-clipping img { display:block; width:100%; height:auto; pointer-events:none; }
.board-clipping:has(img) { padding:6px; }
.board-quote { display:block; }
.board-source { display:block; margin-top:20px; font:italic 17px/1.3 Georgia,serif; }
.board-tools { display:flex; justify-content:space-between; align-items:center; padding:10px 5px 0; }
.board-tools button { font:13px Tahoma,sans-serif; border:0; background:transparent; color:#4a605f; min-width:40px; min-height:36px; padding:5px 10px; cursor:pointer; }
.board-tools button:hover { background:#dbe2df; border-radius:3px; }
.board-tools div button { font-size:22px; }
@media(max-width:650px) {
.dry-erase-board { padding:18px 8px 8px; }
.board-title { font-size:20px; }
.board-viewport { height:66svh; }
}
@media(prefers-reduced-motion:reduce) {
.board-clipping{ transition:none!important; }
}
.object-dialog[data-room="board"] { width:min(1450px,calc(100vw - 16px)); }
.dry-erase-board { border:0; border-radius:0; background: url('../../assets/cork-board.webp') center / 100% 100% no-repeat; padding:4.5% 4.2% 3.4%; box-shadow:none; }
.board-viewport { height:min(64svh,760px); scrollbar-color:#84644999 transparent; }
.board-canvas { grid-template-columns:repeat(9,350px); width:3670px; padding:85px 100px; gap:40px; }
.object-dialog .board-clipping,.object-dialog .board-quote { font-family:'Times New Roman',Times,serif; font-size:23px; font-weight:600; line-height:1.18; letter-spacing:-.02em; }
.object-dialog .board-clipping { color:#29231d; padding:20px 19px; background:#f4eedf url('../../assets/letter-paper.webp') center / 540px; text-shadow:.2px .2px .3px #42302260; box-shadow:1px 2px 3px #34220f45; }
.object-dialog .board-clipping:nth-child(3n) { background-color:#fffdf7; background-blend-mode:screen; }
.object-dialog .board-clipping:nth-child(5n) { background-color:#c3aa7d; background-blend-mode:multiply; }
.object-dialog .board-clipping:has(img) { padding:0; background:none; }
.object-dialog .board-source { font:italic 17px/1.3 'Times New Roman',Times,serif; }
.board-tools { padding-top:2px; }
.board-tools button { color:#f9eed7; text-shadow:0 1px 2px #281808; }
.board-tools button:hover { background:#5f3e2a70; }
#board-overview { font-size:23px; }
[data-room="board"] .dialog-head { top:3.7%; right:3.5%; }
[data-room="board"] .dialog-close { width:34px; height:34px; min-height:34px; padding:0; font:26px/1 var(--ui); background:#f0e4c9e6; }
@media(max-width:650px) {
.board-viewport { height:60svh; }
.dry-erase-board { padding:7% 5% 5%; }
}
.board-space { overflow:hidden; }
.object-dialog[data-room="board"] { width:min(1180px,calc(100vw - 32px)); }
[data-room="board"] .dry-erase-board { padding:5.2% 4.4% 3.4%; }
[data-room="board"] .board-viewport { height:auto; min-height:0; max-height:none; aspect-ratio:var(--board-ratio,1.9); }
.board-canvas { display:block; position:relative; width:1510px; padding:0; }
.board-canvas .board-clipping,.board-preview .board-clipping { position:absolute; margin:0; min-height:0; padding:6px 9px 7px; border:0; border-radius:0; background:#fbfaf6; color:#1e1b17; text-align:justify; box-shadow:1px 3px 4px #3e230f58; }
.object-dialog .board-quote,.board-preview .board-quote { font:400 17px/1.12 'Clipping Pica','Times New Roman',serif; letter-spacing:.005em; text-indent:.65em; text-shadow:.2px 0 #221b1780,-.1px .2px #221b1760; }
.board-canvas .board-clipping:nth-child(3n),.board-preview .board-clipping:nth-child(3n) { background:#fffefb; }
.board-canvas .board-clipping:nth-child(5n),.board-preview .board-clipping:nth-child(5n) { background:#efe1c7; }
.board-canvas .board-clipping::after,.board-preview .board-clipping::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23918575' filter='url(%23n)' opacity='.8' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); }
.board-canvas .board-clipping:has(img),.board-preview .board-clipping:has(img) { padding:0; min-height:0; background:none; }
.board-canvas .board-clipping:has(img)::after,.board-preview .board-clipping:has(img)::after { display:none; }
.board-canvas .board-clipping::before,.board-preview .board-clipping::before { z-index:2; width:13px; height:13px; top:-6px; }
.board-canvas .board-clipping:hover,.board-canvas .board-clipping.is-selected,.board-canvas .board-clipping:focus-visible { z-index:50; box-shadow:2px 8px 14px #30201466; }
.board-canvas .board-clipping:focus-visible { outline:2px solid #493326; outline-offset:3px; }
.stage .quote-board { border-radius:0; overflow:visible; }
.stage .quote-board .object-photo { aspect-ratio:3/2; object-fit:contain; }
.board-preview { position:absolute; left:5.5%; right:5.5%; top:9%; bottom:9%; overflow:hidden; pointer-events:none; }
#board-preview-canvas { position:absolute; display:block; left:0; top:0; transform-origin:0 0; }
.object-dialog[data-room="board"] { inset:0; width:min(1180px,calc(100vw - 32px)); max-width:none; height:50dvh; max-height:520px; margin:auto; overflow:hidden; border:0; border-radius:0; }
.object-dialog[data-room="board"]::backdrop { background:#172119d9; backdrop-filter:blur(5px); }
[data-room="board"] .dialog-inner,[data-room="board"] #board-room,[data-room="board"] .dry-erase-board { width:100%; height:100%; }
[data-room="board"] .dry-erase-board { position:relative; display:block; padding:0; }
[data-room="board"] .board-viewport { position:absolute; inset:7% 5%; width:auto; height:auto; min-height:0; max-height:none; aspect-ratio:auto; overflow:hidden; touch-action:none; scrollbar-width:none; }
[data-room="board"] .dialog-head { position:fixed; top:18px; right:20px; z-index:80; }
[data-room="board"] .dialog-close { width:38px; height:38px; min-height:38px; background:#f0e4c9e8; }
.clipping-dialog:focus{ outline:none; }
.board-hint { flex:none; margin:0; padding:7px 54px 0; color:#fff8e7c2; text-align:center; text-shadow:0 1px 3px #281808; font:11px/1.2 Tahoma,sans-serif; letter-spacing:.06em; }
.board-hint-touch { display:none; }
@media(max-width:650px) {
.stage .quote-board .board-preview { top:9%; bottom:9%; aspect-ratio:auto; }
.object-dialog[data-room="board"] { width:calc(100vw - 20px); height:64dvh; }
[data-room="board"] .dialog-head { position:absolute; top:10px; right:10px; }
}

.board-canvas .board-clipping { cursor:grab; touch-action:none; user-select:none; }
.board-canvas .board-clipping.is-selected,.board-canvas .board-clipping:focus-visible { z-index:20000!important; }
.board-canvas .board-clipping.is-lifted { z-index:30000!important; cursor:grabbing; transform:rotate(var(--tilt)) scale(1.025); box-shadow:5px 14px 20px #30201470; }
.board-canvas .board-clipping.is-lifted::before { transform:translateY(-5px); box-shadow:2px 7px 4px #27382d45; }

/* visitor-quotes.css */
.board-canvas .board-clipping.visitor-clipping,.board-preview .board-clipping.visitor-clipping,.board-canvas .board-clipping.visitor-form-card,.board-preview .board-clipping.visitor-form-card { padding:9px 11px 9px 30px; background-color:#fbfbf3; background-image:linear-gradient(90deg,transparent 0 21px,#dfa49c 21px 22.5px,transparent 22.5px),repeating-linear-gradient(#fbfbf3 0 21px,#b9cde5 21px 22px); }
.board-canvas .visitor-clipping .board-quote,.board-preview .visitor-clipping .board-quote,.visitor-form-card .board-quote { font:italic 400 16px/22px Georgia,serif; letter-spacing:0; text-indent:0; color:#2d3a56; }
.board-canvas .visitor-clipping .board-source,.board-preview .visitor-clipping .board-source { margin-top:6px; font:11px/1.3 Tahoma,sans-serif; font-style:normal; color:#7c8698; text-align:right; }
.board-canvas .board-clipping.visitor-form-card { cursor:default; }
.visitor-form-card form { display:flex; flex-direction:column; gap:2px; }
#visitor-quote-text { display:block; width:100%; box-sizing:border-box; resize:none; border:0; padding:0; background:transparent; font:italic 16px/22px Georgia,serif; color:#2d3a56; outline:none; }
#visitor-quote-text::placeholder { color:#8fa0bd; }
#visitor-quote-name { border:0; border-top:1px dashed #b9cde5; padding:6px 0 0; background:transparent; font:12px Tahoma,sans-serif; color:#46526b; outline:none; }
#visitor-quote-text:focus-visible,#visitor-quote-name:focus-visible { outline:2px solid #493326; outline-offset:2px; }
#visitor-quote-name::placeholder { color:#97a3b8; }
.visitor-quote-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
#visitor-quote-pin { align-self:flex-end; margin-top:5px; border:1px solid #9fb4d0; border-radius:3px; padding:4px 14px; background:#eef3fa; color:#2d3a56; font:12px Tahoma,sans-serif; cursor:pointer; }
#visitor-quote-pin:hover { background:#e2ebf8; }
#visitor-quote-pin:disabled { opacity:.5; cursor:default; }
#visitor-quote-status { margin:4px 0 0; font:11px/1.3 Tahoma,sans-serif; color:#8a7c66; }
#visitor-quote-status:empty { display:none; }

/* A dropped clipping lands like a real index card pressed into cork. */
@keyframes board-land {
  0% { transform:rotate(var(--tilt)) scale(1.025); box-shadow:5px 14px 20px #30201470; }
  45% { transform:rotate(calc(var(--tilt) - 1.1deg)) scale(1.004); }
  75% { transform:rotate(calc(var(--tilt) + .6deg)) scale(1); }
  100% { transform:rotate(var(--tilt)) scale(1); }
}
.board-canvas .board-clipping.just-landed { animation:board-land .34s cubic-bezier(.25,.9,.3,1); }
@keyframes board-pin-press {
  from { transform:translateY(-5px); box-shadow:2px 7px 4px #27382d45; }
  to { transform:translateY(0); }
}
.board-canvas .board-clipping.just-landed::before { animation:board-pin-press .34s ease-out; }
@media(prefers-reduced-motion:reduce) {
.board-canvas .board-clipping.just-landed,.board-canvas .board-clipping.just-landed::before { animation:none!important; }
}

#board-canvas { perspective:1600px; }
#board-room .board-clipping { transform-origin:50% 8%; transition:rotate 170ms ease,box-shadow 170ms ease; }
#board-room .board-clipping.is-lifted { rotate:x 9deg; box-shadow:5px 17px 14px #30201466; }
@media(prefers-reduced-motion:reduce) { #board-room .board-clipping { rotate:none!important; transition:none; } }