html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root { --hand: 'Caveat', 'Bradley Hand', cursive; --type: 'Special Elite', 'Courier New', monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #6b4a2b; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; }
a { color: #1d3fb8; }

/* Cork: layered noise from gradients, so there is no image to load. */
#board { position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #0000 0 1px, #0000 1px) ,
    radial-gradient(#5a391c 0.8px, #0000 1.2px) 0 0 / 7px 7px,
    radial-gradient(#d9a86b 0.7px, #0000 1.1px) 3px 4px / 9px 9px,
    radial-gradient(#8a5d33 1px, #0000 1.4px) 5px 1px / 13px 13px,
    radial-gradient(ellipse at 50% 40%, #c79358, #a8743f 70%, #7f5429);
  box-shadow: inset 0 0 60px #3b230f99; }

.item { position: absolute; transform: rotate(var(--r, 0deg)); transition: transform .2s, box-shadow .2s, filter .2s;
  filter: drop-shadow(2px 5px 5px #0006); }
.item:hover, .item:focus-visible { transform: rotate(var(--r, 0deg)) scale(1.04) translateY(-3px); filter: drop-shadow(4px 12px 10px #0007); z-index: 5; outline: none; }
.pin { position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #fff9 0 2px, var(--pin, #d62828) 3px, #7a0f0f 100%); box-shadow: 1px 3px 3px #0007; }

.sticky { width: 206px; min-height: 200px; padding: 26px 16px 16px; background: var(--c, #fff27a); font: 700 23px/1.08 var(--hand); color: #2a2206;
  background-image: linear-gradient(#0000 85%, #0000000d); }
.sticky h3 { margin: 0 0 6px; font-size: 30px; }
.sticky ul { margin: 0; padding-left: 18px; font-weight: 500; }

.index { width: 380px; padding: 26px 26px 20px; background: #fdfcf6; font: 16px/1.5 var(--type); color: #222;
  background-image: linear-gradient(#0000 0 58px, #e34b4b66 58px 59px, #0000 59px), repeating-linear-gradient(#0000 0 23px, #6aa2d855 23px 24px);
  background-position: 0 0, 0 12px; }
.index h3 { margin: 0 0 18px; font-size: 22px; letter-spacing: 1px; }
.index ol { margin: 0; padding-left: 22px; }

.polaroid { width: 300px; padding: 12px 12px 14px; background: #fbfaf5; }
.polaroid img { display: block; width: 100%; aspect-ratio: 1.38; object-fit: cover; background: #eee; }
.polaroid p { margin: 10px 0 0; font: 700 26px/1 var(--hand); text-align: center; color: #333; }

.clip { width: 270px; padding: 14px 16px 14px; background: #fff; border-top: 6px solid var(--c); font: 14px/1.35 Inter, system-ui, sans-serif; color: #222; }
.clip .k { font-size: 11px; letter-spacing: 1.5px; color: #777; text-transform: uppercase; }
.clip h4 { margin: 2px 0 6px; font-size: 20px; }
.clip b { display: block; font-size: 26px; color: var(--c); line-height: 1; }
.clip span { font-size: 12.5px; color: #555; }

.contact { width: 300px; padding: 18px 20px; background: #1f2a44; color: #f4efe3; font: 15px/1.6 Inter, system-ui, sans-serif; }
.contact h3 { margin: 0 0 4px; font: 700 30px/1 var(--hand); color: #ffd58a; }
.contact a { color: #cfe0ff; }

svg.string { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

#zoom { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; place-items: center; background: #1a0f06b3; animation: fade .2s both; }
#zoom[hidden] { display: none; }
#zoom .item { position: relative; left: auto !important; top: auto !important; transform: rotate(0) scale(1.55); filter: drop-shadow(6px 20px 20px #000a);
  animation: lift .25s ease both; }
#zoom .item.polaroid { transform: scale(2.2); }
#zoom .close { position: fixed; right: 18px; top: 14px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000;
  font: 700 22px/44px Inter; text-align: center; }
@keyframes fade { from { opacity: 0; } }
@keyframes lift { from { transform: rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Phones: the board becomes a scrolling stack of pinned notes */
#board.list { overflow-y: auto; }
#board.list > div { position: static !important; transform: none !important; width: auto !important; height: auto !important;
  display: flex; flex-direction: column; align-items: center; gap: 34px; padding: 34px 14px 60px; }
#board.list .item { position: relative; left: auto !important; top: auto !important; max-width: 100%; }
#board.list .index, #board.list .polaroid, #board.list .contact, #board.list .clip, #board.list .sticky { width: min(340px, 88vw); }
#board.list svg.string { display: none; }
#board.list ~ #zoom .item { transform: none; }