:root{--bg:#f6efe4;--card:#fffdf8;--ink:#46372e;--muted:#8a7868;--accent:#d9776a;--pink:#f3c6c0;--mint:#cfe5cf;--r:16px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(#e6d8c2 1px,transparent 1.5px);background-size:20px 20px}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f6efe4ee;backdrop-filter:blur(6px);border-bottom:1px solid #0000000d}
.logo{font-family:Caveat,cursive;font-size:2.2rem;font-weight:700;color:var(--accent);text-decoration:none;line-height:1}
.top nav{margin-left:auto;display:flex;gap:6px}
.navbtn{white-space:nowrap;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700}
.navbtn.on{background:var(--ink);color:#fff}
.demo{background:#ffde7a;color:#4a3800;font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:999px;letter-spacing:.05em}
main{max-width:1500px;margin:auto;padding:14px 10px 40px}
h2.page{font-family:Caveat,cursive;font-size:2.4rem;text-align:center;margin:6px 0 14px}
.grid{display:flex;gap:12px;align-items:flex-start}.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.pin{display:block;border:0;padding:0;background:none;text-align:left;width:100%;text-decoration:none}
.pin .ph{border-radius:var(--r);overflow:hidden;background:#eadfcf;box-shadow:0 2px 6px #0001;transition:transform .15s}
@media(hover:hover){.pin:hover .ph{transform:scale(1.015)}}
.pin img{width:100%;height:auto;display:block}
.pin .t{font-weight:700;font-size:.95rem;margin:6px 4px 0;line-height:1.25}
.pin .s{font-size:.8rem;color:var(--muted);margin:2px 4px 0}
.board .ph{aspect-ratio:4/5}.board img{height:100%;object-fit:cover}.board .t{font-family:Caveat,cursive;font-size:1.6rem}
.empty{text-align:center;color:var(--muted);padding:40px}
.back{display:inline-block;margin:0 0 6px 6px;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--card)}
.x{position:fixed;top:10px;right:10px;width:50px;height:50px;border-radius:50%;border:0;background:var(--card);font-size:1.4rem;z-index:21}
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:20px}

/* ===== Cork board (public site only) ===== */
body:not(.adm){background:#c08c55 url(cork.jpg) repeat;background-size:480px 480px}
body:not(.adm) .top{background:#fffaf0f2;border-bottom:4px solid #7a4a24;box-shadow:0 2px 10px #0004;padding:6px 14px}
body:not(.adm) .top .navbtn{background:#6b3e1c;color:#fff7e8;box-shadow:0 2px 0 #0003}
body:not(.adm) .logo{color:#ffe3c2;text-shadow:0 2px 0 #0004}
body:not(.adm) h2.page{color:#fff6e6;text-shadow:0 2px 3px #0006}
body:not(.adm) footer,body:not(.adm) .empty{color:#fff2dc;text-shadow:0 1px 2px #0007}
body:not(.adm) .back{background:#fff7e8;box-shadow:0 2px 3px #0004}
body:not(.adm) .grid{gap:16px}body:not(.adm) .col{gap:22px}
body:not(.adm) main{padding-top:24px}

/* Paper patches */
body:not(.adm) .pin{position:relative;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 4px 4px #0006);transition:transform .2s;-webkit-tap-highlight-color:transparent}
@media(hover:hover){body:not(.adm) .pin:hover{transform:rotate(0deg) scale(1.02);z-index:2}}
body:not(.adm) .pin .ph{border-radius:0;box-shadow:none;background:#e9dccb}
body:not(.adm) .pin:hover .ph{transform:none}
.paper{--paper:#fffaf0;background:var(--paper);padding:9px 9px 8px;position:relative}
.paper-1{--paper:#fdf3df !important}.paper-2{--paper:#f6efe6 !important}.paper-3{--paper:#fff6f3 !important}
body:not(.adm) .pin .t{margin:7px 2px 2px;font-family:Caveat,cursive;font-size:1.35rem;line-height:1.05;color:#3d2a1e}
body:not(.adm) .pin .s{margin:0 2px 2px}
/* torn paper: jagged top+bottom edge */
.v-torn{clip-path:polygon(0 1.2%,6% 0,13% 1%,21% .2%,30% 1.4%,38% .3%,47% 1.1%,55% 0,64% 1.3%,72% .4%,81% 1.2%,90% .1%,100% 1%,100% 98.6%,93% 99.8%,85% 98.7%,76% 100%,67% 98.9%,58% 99.9%,49% 98.6%,40% 99.7%,31% 98.8%,22% 100%,13% 98.7%,5% 99.6%,0 98.8%)}
/* deckle edge: slightly uneven all around */
.v-deckle{clip-path:polygon(1% .6%,15% 0,33% .8%,52% .1%,70% .9%,88% 0,99.4% .7%,100% 15%,99.2% 33%,100% 52%,99.3% 70%,100% 88%,99% 99.5%,82% 100%,64% 99.2%,46% 100%,28% 99.3%,10% 100%,.6% 99.2%,0 82%,.8% 64%,0 46%,.7% 28%,0 12%)}
/* polaroid */
body:not(.adm) .paper.v-polaroid{--paper:#fffffe !important;padding:10px 10px 4px}
body:not(.adm) .paper.v-polaroid .t{text-align:center;padding:6px 0 8px}
/* pinking shears */
.v-zigzag{padding:14px 9px 13px !important}
/* photo with rounded corners + photo corners */
body:not(.adm) .paper.v-photo{border-radius:12px}body:not(.adm) .paper.v-photo .ph{border-radius:8px}
.v-photo::after{content:"";position:absolute;inset:3px;pointer-events:none;
background:linear-gradient(135deg,#3b2a20 0 14px,#0000 14px) top left,linear-gradient(-135deg,#3b2a20 0 14px,#0000 14px) top right,linear-gradient(45deg,#3b2a20 0 14px,#0000 14px) bottom left,linear-gradient(-45deg,#3b2a20 0 14px,#0000 14px) bottom right;background-size:24px 24px;background-repeat:no-repeat;opacity:.85}

/* Pins and tape. Clipped patches would cut the pin off, so it lives in its own .fx layer */
body:not(.adm) .pin .fx{position:absolute;z-index:3;pointer-events:none}
.fx[class*=pin-]{top:-9px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
background:radial-gradient(circle at 34% 28%,#fff 0 2px,#fffc 3px,transparent 6px),radial-gradient(circle at 62% 70%,transparent 0 6px,#0000 7px),conic-gradient(from 210deg,var(--a),var(--b),var(--a),var(--d),var(--a));
box-shadow:inset -2px -3px 4px #0006,inset 2px 2px 3px #fff8,0 0 0 1px #0004,2px 4px 3px #0007}
.fx[class*=pin-]::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--b),var(--d));box-shadow:inset 0 1px 1px #fff9,0 1px 1px #0005}
.fx.pin-silver{--a:#9aa0a6;--b:#f4f6f8;--d:#5c6166}.fx.pin-gold{--a:#c9962b;--b:#fff1b0;--d:#7a5410}
.fx.pin-brass{--a:#b08d3c;--b:#ead79a;--d:#6b5420}.fx.pin-copper{--a:#b8653a;--b:#ffc8a3;--d:#6e3418}.fx.pin-gun{--a:#4a4f55;--b:#a9b0b8;--d:#22262a}
.fx.tape1{top:-10px;left:50%;width:84px;height:24px;margin-left:-42px;transform:rotate(-3deg);background:repeating-linear-gradient(45deg,#f6c7cfcc 0 6px,#fbe0e5cc 6px 12px);box-shadow:0 1px 2px #0003}
.fx.tl,.fx.br{width:62px;height:20px;background:repeating-linear-gradient(90deg,#bfe0d0d9 0 5px,#d7eee2d9 5px 10px);box-shadow:0 1px 2px #0003}
.fx.tl{top:-4px;left:-16px;transform:rotate(-38deg)}.fx.br{bottom:-4px;right:-16px;transform:rotate(-38deg)}
body:not(.adm) .board .ph{aspect-ratio:4/5}
body:not(.adm) .board .t{font-size:1.7rem;text-align:center}body:not(.adm) .board .s{text-align:center}

/* Wooden frame around the board */
body:not(.adm) main{margin:14px auto;border:14px solid;border-color:#a8723d #7e4c22 #6a3f1d #94602f;border-radius:6px;box-shadow:inset 0 0 18px #0007,0 6px 16px #0006;padding:26px 14px 30px;max-width:calc(1500px)}
@media(max-width:600px){body:not(.adm) main{border-width:9px;margin:8px;padding:22px 8px 24px}}
body:not(.adm) .logo img{height:58px !important;filter:drop-shadow(0 1px 0 #fff)}

.pin .ph{position:relative}.pin .nb{position:absolute;bottom:6px;right:6px;background:#000a;color:#fff;font-size:.75rem;font-weight:800;padding:2px 8px;border-radius:99px}

/* Detail view: passe-partout modal */
#lb{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#140c07a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:lbFade .22s ease-out}
#lb[hidden]{display:none}
@keyframes lbFade{from{opacity:0}to{opacity:1}}@keyframes lbZoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
#lb .box{display:flex;width:min(1180px,100%);height:min(86vh,780px);border-radius:4px;overflow:hidden;box-shadow:0 24px 70px #000c,0 0 0 1px #0006;animation:lbZoom .26s cubic-bezier(.2,.9,.3,1.15)}
#lb .car{position:relative;flex:1.45 1 0;min-width:0;display:flex;flex-direction:column;padding:42px 42px 34px;
 background:linear-gradient(135deg,#f8f4ea,#efe8d8);box-shadow:inset 0 0 0 1px #fff8,inset 0 0 40px #d9cfb955}
.track{position:relative;flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:#1b1612;
 border:1px solid #fffdf7;outline:6px solid #e6dcc6;box-shadow:0 0 0 7px #cfc3a8,0 0 0 8px #fffaf0,inset 0 2px 10px #0009}
.track::-webkit-scrollbar{display:none}
.sl{flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
.sl img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:#fffaf0;font-size:2rem;line-height:1;color:#3a2c22;box-shadow:0 2px 8px #0005;z-index:2}
.nav.prev{left:14px}.nav.next{right:14px}.nav:disabled{opacity:.3}.nav[hidden],.cnt[hidden]{display:none}
.cnt{position:absolute;top:12px;left:50%;transform:translateX(-50%);color:#6b5a48;font:700 .85rem Tahoma,Verdana,Geneva,sans-serif;letter-spacing:.08em}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#b8aa90}.dots button.on{background:#5a4636;transform:scale(1.25)}
#lb .tx{flex:1 1 0;min-width:300px;max-width:440px;overflow-y:auto;padding:34px 30px;background:#1a1410e6;color:#fff;font-family:Tahoma,Verdana,Geneva,sans-serif}
#lb h3{font:bold 1.6rem/1.2 Tahoma,Verdana,Geneva,sans-serif;margin:0 0 16px;color:#fff}
#lb .md{font:.98rem/1.65 Tahoma,Verdana,Geneva,sans-serif;color:#f4efe8;overflow-wrap:anywhere}
#lb .md p{margin:0 0 1em}#lb .md h4,#lb .md h5,#lb .md h6{font:bold 1.15rem/1.3 Tahoma,Verdana,Geneva,sans-serif;color:#fff;margin:1.3em 0 .4em}
#lb .md h5{font-size:1.05rem}#lb .md h6{font-size:.98rem}#lb .md b{color:#fff}
#lb .md ul,#lb .md ol{margin:0 0 1em;padding-left:1.4em}#lb .md li{margin:.2em 0}
#lb .bd{display:inline-block;margin-top:14px;font:bold .9rem Tahoma,Verdana,Geneva,sans-serif;color:#fff;background:#ffffff1f;border:1px solid #fff4;padding:7px 14px;border-radius:999px;text-decoration:none}
.x{position:fixed;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:#fffaf0;color:#2b2018;font-size:1.3rem;z-index:21;box-shadow:0 2px 10px #0007}
@media(max-width:860px){#lb{padding:10px}#lb .box{flex-direction:column;height:auto;max-height:calc(100vh - 20px);overflow-y:auto}
 #lb .car{flex:none;height:min(62vh,520px);padding:22px 16px 26px}.track{outline-width:4px;box-shadow:0 0 0 5px #cfc3a8,0 0 0 6px #fffaf0,inset 0 2px 8px #0009}
 .cnt{top:4px}.dots{bottom:7px}.nav{width:40px;height:40px;font-size:1.7rem}.nav.prev{left:6px}.nav.next{right:6px}
 #lb .tx{flex:none;max-width:none;min-width:0;overflow:visible;padding:22px 20px 34px;background:#1a1410f2}}

/* Ads */
.adtag{position:absolute;top:14px;left:14px;background:#fff;color:#1a1410;font:bold .72rem Tahoma,Verdana,Geneva,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;box-shadow:0 1px 3px #0005;border:1px solid #1a1410}
body:not(.adm) .pin.ad .paper{outline:2px dashed #c9a22788;outline-offset:-5px}
#lb .adl{display:inline-block;margin:0 0 10px;font:bold .75rem Tahoma,Verdana,Geneva,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1a1410;background:#ffd84d;padding:4px 10px;border-radius:3px}
#lb .adl[hidden],#lb .buy[hidden]{display:none}
#lb .buy{display:block;margin:18px 0 6px;text-align:center;font:bold 1.15rem Tahoma,Verdana,Geneva,sans-serif;color:#1a1410;background:linear-gradient(#ffe27a,#f5b82e);padding:16px 18px;border-radius:10px;text-decoration:none;box-shadow:0 4px 14px #0007,inset 0 1px 0 #fff8}
#lb .buy:hover{filter:brightness(1.06)}
#lb .bd[hidden]{display:none}

body:not(.adm) .top{-webkit-backdrop-filter:none;backdrop-filter:none}
.col{contain:layout style}
html{overscroll-behavior-y:none}

.omlink{border:0;background:none;padding:2px 4px;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#lb.nophoto .car{display:none}#lb.nophoto .box{width:min(560px,100%);height:auto;max-height:86vh}#lb.nophoto .tx{max-width:none}