/* /doodles sectioned gallery + license notice (loaded only when the gallery has art). */
.dd-license{margin:0 0 clamp(28px,5vh,44px);padding:16px 18px;border:1px solid var(--sage);background:#fbfaf6;max-width:46em}
.dd-license p{margin:0}
.dd-lic-main{font:400 16px/1.5 var(--body,inherit)}
.dd-lic-main a,.lb-lic a{color:var(--link)}
.dd-lic-credit{margin-top:10px!important;font:500 11px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted)}
.dd-lic-credit span{text-transform:uppercase;letter-spacing:.12em;margin-right:6px}
.dd-lic-credit code{font:500 12px/1.5 var(--mono);color:var(--ink);background:var(--wash);padding:2px 6px;word-break:break-word;letter-spacing:0}

/* ---- Tagged "notebook pinboard" (preview) -------------------------------- */
/* Chips: tag links (real <a href="/doodles/tag/x">), JS turns them into toggles. */
.dd-tags{position:relative;margin:0 0 clamp(26px,5vh,40px);max-width:68em}
.dd-hint{position:absolute;right:0;top:-6px;margin:0;font:italic 400 18px/1 var(--display);color:var(--muted);transform:rotate(-4deg)}
.dd-hint::after{content:"";display:block;width:46px;height:36px;margin:2px 0 0 18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 40' fill='none' stroke='%2353624f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6c18 2 30 10 32 26'/%3E%3Cpath d='M30 26l8 8 6-10'/%3E%3C/svg%3E") no-repeat center/contain;transform:scaleX(-1)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 8px}
.chips-all{margin-bottom:12px}
.tg{display:flex;align-items:baseline;gap:8px 14px;margin:0 0 10px}
.tgl{flex:0 0 5.5em;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 12px;border:1px solid var(--sage);border-radius:999px;background:#fbfaf6;color:var(--ink);font:500 12px/1.2 var(--mono);letter-spacing:.04em;text-decoration:none;transition:background .15s,color .15s,transform .15s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chips li:nth-child(3n+1) .chip{transform:rotate(-1.2deg)}
.chips li:nth-child(3n+2) .chip{transform:rotate(.9deg)}
.chip .n{font-size:10.5px;color:var(--muted);padding:1px 6px;border-radius:999px;background:var(--wash)}
.chip:hover,.chip:focus-visible{background:var(--wash);transform:rotate(0) translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.on .n{background:rgba(244,243,238,.18);color:var(--paper)}
.chip-all{border-style:dashed}
.chip.live:not(.on) .n{background:rgba(156,175,136,.35);color:var(--ink)}
.chip.zero{opacity:.42;border-style:dotted;cursor:not-allowed;text-decoration:line-through;text-decoration-color:rgba(83,98,79,.5)}
.chip.zero:hover{background:#fbfaf6;transform:none}
.dd-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--hair)}
.dd-ctl[hidden]{display:none}
.dd-ctl button,.dd-any{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);height:34px;padding:0 13px;cursor:pointer}
.dd-ctl button:hover,.dd-any:hover{background:var(--wash)}
.dd-ctl button:focus-visible,.dd-any:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.dd-match b{font-weight:700;text-decoration:underline wavy var(--sage);text-underline-offset:3px}
.dd-match[aria-pressed="true"]{background:var(--wash)}
.dd-shuf::before{content:"\21C4";margin-right:6px;font-size:14px}
.dd-status{margin:0 0 0 auto;font:italic 400 17px/1.2 var(--display);color:var(--muted)}

/* Board: dotted notebook paper with a margin rule; pins on a dense grid. */
.corkboard{position:relative;overflow:clip;padding:clamp(26px,4vw,48px) clamp(14px,3vw,40px) clamp(30px,5vw,56px) clamp(22px,4vw,56px);background:#f8f7f1 radial-gradient(circle,rgba(83,98,79,.22) 1px,transparent 1.4px) 0 0/22px 22px;border:1px solid var(--hair);box-shadow:inset 0 0 0 6px rgba(244,243,238,.6)}
.corkboard::before{content:"";position:absolute;top:0;bottom:0;left:clamp(10px,2vw,26px);border-left:1.5px solid rgba(201,139,127,.45);pointer-events:none}
.sq{position:absolute;pointer-events:none;opacity:.55;z-index:0}
.sq1{width:70px;height:70px;top:6px;right:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%2353624f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 40c0-4 6-5 8-1s-2 11-9 11-13-7-12-15 10-16 20-14 18 12 16 22-12 20-24 19-24-12-24-25'/%3E%3C/svg%3E") no-repeat center/contain}
.sq2{width:120px;height:36px;bottom:6px;left:30%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 40' fill='none' stroke='%239caf88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c10-14 20 14 30 0s20 14 30 0 20 14 30 0 20 14 30 0'/%3E%3C/svg%3E") no-repeat center/contain}
.sq3{width:34px;height:34px;top:38%;left:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23c98b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 4l6 18 19 1-15 11 6 19-16-11-16 11 6-19L5 23l19-1z'/%3E%3C/svg%3E") no-repeat center/contain;transform:rotate(12deg)}
.sq4{width:70px;height:52px;bottom:14px;right:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%2353624f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 50c14-2 22-14 18-26s-16-6-10 6 30 22 52 4'/%3E%3Cpath d='M58 26l9 8-11 5'/%3E%3C/svg%3E") no-repeat center/contain}
.board{--cell:clamp(150px,15.5vw,200px);--gap:clamp(16px,2.2vw,30px);position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,var(--cell));grid-auto-rows:var(--cell);grid-auto-flow:dense;gap:var(--gap);justify-content:center}
.pin{--h:var(--cell);position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.pin[hidden]{display:none}
.s-t{grid-row:span 2;--h:calc(2 * var(--cell) + var(--gap))}
.s-w{grid-column:span 2}
.s-l{grid-column:span 2;grid-row:span 2;--h:calc(2 * var(--cell) + var(--gap))}
.s-s{--h:calc(var(--cell) * .88)}
.pin:nth-child(odd) .frame{align-self:flex-start}.pin:nth-child(3n) .frame{align-self:flex-end}
.pin .frame{position:relative;display:block;flex:none;max-width:100%;box-sizing:border-box;padding:8px 8px 24px;transform:rotate(var(--rot,0deg));transition:transform .25s,box-shadow .25s}
.s-s .frame{max-width:88%}
.pin .frame img{width:auto;height:auto;max-width:100%;max-height:calc(var(--h) - 32px);background:transparent}
.pin .frame:hover,.pin .frame:focus-visible{box-shadow:0 14px 22px -12px rgba(47,62,51,.55);z-index:3;animation:wob .55s ease-in-out}
.pin .frame:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.yr{position:absolute;right:9px;bottom:5px;font:italic 400 13px/1 var(--display);color:var(--muted)}
.r0{--rot:-2.6deg}.r1{--rot:1.8deg}.r2{--rot:-1.1deg}.r3{--rot:3deg}.r4{--rot:.6deg}.r5{--rot:-3.4deg}.r6{--rot:2.3deg}.r7{--rot:-.4deg}
@keyframes wob{0%{transform:rotate(var(--rot,0deg))}25%{transform:rotate(calc(var(--rot,0deg) - 2.4deg)) scale(1.03)}55%{transform:rotate(calc(var(--rot,0deg) + 2deg)) scale(1.035)}80%{transform:rotate(calc(var(--rot,0deg) - .8deg)) scale(1.02)}100%{transform:rotate(var(--rot,0deg)) scale(1.02)}}
.pin .frame:hover{transform:rotate(var(--rot,0deg)) scale(1.02)}
@keyframes pop{0%{opacity:0;transform:scale(.6) rotate(-6deg)}70%{opacity:1;transform:scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}}
.pin.pop{animation:pop .42s cubic-bezier(.3,1.4,.5,1) both}
/* Decorations: washi tape (top / corners) or pushpins, picked per file. */
.d0::before,.d3::before,.d2::before,.d2::after{content:"";position:absolute;z-index:2;width:62px;height:19px;opacity:.88;box-shadow:0 1px 1px rgba(47,62,51,.12)}
.d0::before,.d3::before{top:-9px;left:50%;margin-left:-31px;transform:rotate(-3deg)}
.d0::before{background:repeating-linear-gradient(45deg,rgba(156,175,136,.75) 0 5px,rgba(178,194,164,.55) 5px 10px)}
.d3::before{background:rgba(233,217,160,.8) repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.35) 7px 9px);transform:rotate(4deg)}
.d2::before,.d2::after{width:46px;height:16px;background:repeating-linear-gradient(-45deg,rgba(227,183,174,.85) 0 4px,rgba(240,214,207,.7) 4px 8px)}
.d2::before{top:-4px;left:-14px;transform:rotate(-42deg)}
.d2::after{bottom:-4px;right:-14px;transform:rotate(-42deg)}
.d1::before,.d4::before{content:"";position:absolute;z-index:2;top:-7px;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;box-shadow:2px 3px 3px rgba(47,62,51,.35)}
.d1::before{background:radial-gradient(circle at 35% 32%,#fff 0 1.5px,#d9826e 2.5px,#9b4b3c 100%)}
.d4::before{background:radial-gradient(circle at 35% 32%,#fff 0 1.5px,#9caf88 2.5px,#4d6646 100%)}
.dd-none{margin:24px 0 8px;text-align:center;font:italic 400 20px/1.4 var(--display);color:var(--muted)}
.dd-none[hidden]{display:none}
.dd-none .dd-any{margin-left:8px;vertical-align:middle}
.lightbox .lb-cap{text-transform:none;letter-spacing:.02em}

@media (max-width:760px){.dd-hint{display:none}.tg{flex-direction:column;gap:6px;margin-bottom:12px}.tgl{flex:none}}
@media (max-width:600px){
  .corkboard{padding:24px 12px 30px 22px}
  .corkboard::before{left:9px}
  .board{--gap:14px;--cell:calc((100vw - 2 * clamp(20px,4.5vw,56px) - 36px - 14px) / 2);grid-template-columns:repeat(2,minmax(0,1fr))}
  .chip{font-size:11.5px;padding:6px 10px}
  .pin .frame{padding:5px 5px 20px}.pin .frame img{max-height:calc(var(--h) - 25px)}
  .yr{font-size:12px;right:7px;bottom:4px}
  .dd-status{flex-basis:100%;margin:0}
  .sq1{width:48px;height:48px}.sq3,.sq4{display:none}
  .lightbox{padding:10px;max-width:96vw}.lb-ctl button{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .pin .frame,.chip{transition:none}
  .pin .frame:hover,.pin .frame:focus-visible{animation:none}
  .pin.pop{animation:none}
}