:root{
  --board-bg: url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCc+CiAgPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nI2Q3Yjg5OScvPgogIDxnIGZpbGw9JyNjNzlkNzcnIG9wYWNpdHk9JzAuMzUnPgogICAgPGNpcmNsZSBjeD0nMjAnIGN5PScyNScgcj0nNCcvPjxjaXJjbGUgY3g9JzgwJyBjeT0nNDAnIHI9JzMnLz48Y2lyY2xlIGN4PSc2MCcgY3k9JzE2MCcgcj0nNScvPgogICAgPGNpcmNsZSBjeD0nMjUnIGN5PSc3MCcgcj0nMi41Jy8+PGNpcmNsZSBjeD0nMTYwJyBjeT0nMzAnIHI9JzIuNScvPjxjaXJjbGUgY3g9JzQwJyBjeT0nMTIwJyByPSczJy8+CiAgPC9nPgo8L3N2Zz4K');
  --paper-bg: url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCc+CiAgPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nI2ZmZmRmNicvPgogIDxnIG9wYWNpdHk9JzAuMDgnIGZpbGw9JyMwMDAnPgogICAgPGNpcmNsZSBjeD0nMjAnIGN5PScyNScgcj0nMScvPjxjaXJjbGUgY3g9JzgwJyBjeT0nNDAnIHI9JzEnLz48Y2lyY2xlIGN4PSc2MCcgY3k9JzE2MCcgcj0nMScvPgogICAgPGNpcmNsZSBjeD0nMjUnIGN5PSc3MCcgcj0nMScvPjxjaXJjbGUgY3g9JzE2MCcgY3k9JzMwJyByPScxJy8+PGNpcmNsZSBjeD0nNDAnIGN5PScxMjAnIHI9JzEnLz4KICA8L2c+Cjwvc3ZnPgo=');
  --ink:#1a1a1a;
  --pin-red:#e63946; --pin-blue:#457b9d; --pin-yellow:#f1c40f;
  --string-red:#e63946; --string-blue:#457b9d; --string-yellow:#f1c40f; --string-black:#111;
}

body{ background-image: var(--board-bg); background-size: 400px 400px; }
.board-area{ position:relative; min-height: 200px; }

.board-note, .board-photo{
  position:relative; background: var(--paper-bg), #fffdf6; background-size: 200px 200px; color:var(--ink);
  border-radius:14px; padding:.9rem; box-shadow:0 10px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) inset;
  transform: rotate(var(--rot, -1.5deg));
  max-width:560px;
}
.board-photo{ padding:.6rem .6rem 2.6rem; }
.board-photo__img{ border-radius:10px; display:block; width:100%; height:auto; }
.board-photo__cap{ text-align:center; font-family:"Courier New", monospace; opacity:.85; margin-top:.35rem; }
.board-photo__placeholder{ height:220px; background: repeating-linear-gradient(135deg,#faf7ec,#faf7ec 10px,#f4ecd3 10px,#f4ecd3 20px); border-radius:10px; }

.board-note__title{ margin-top:.1rem; margin-bottom:.5rem; font-weight:800; letter-spacing:.3px; }

.taped .tape, .board-photo .tape{
  position:absolute; width:70px; height:22px;
  background: linear-gradient(transparent 2px, rgba(255,255,255,.85) 2px 20px, transparent 20px),
              repeating-linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px);
  box-shadow:0 6px 14px rgba(0,0,0,.15); border-radius:4px; mix-blend-mode:multiply;
}
.tape-left{ left:12px; top:-8px; transform:rotate(-12deg); }
.tape-right{ right:12px; top:-10px; transform:rotate(8deg); }
.tape-top{ left:50%; transform: translateX(-50%) rotate(-4deg); top:-10px; }

.pushpin{ position:absolute; width:14px; height:14px; border-radius:999px; top:-7px; left:18px; transform: translateY(-50%); }
.pin-red .pushpin{ background:var(--pin-red); }
.pin-blue .pushpin{ background:var(--pin-blue); }
.pin-yellow .pushpin{ background:var(--pin-yellow); }

/* Pin shadow variants */
.pin-shadow-soft .pushpin{ box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 8px 10px rgba(0,0,0,.25); }
.pin-shadow-hard .pushpin{ box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 12px 0 rgba(0,0,0,.4); }
.pin-shadow-none .pushpin{ box-shadow: none; }

/* Strings layer */
.board-strings-layer{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:1; }
.board-strings-layer path{ fill:none; stroke-width:3px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.board-strings-layer path.red{ stroke:var(--string-red); }
.board-strings-layer path.blue{ stroke:var(--string-blue); }
.board-strings-layer path.yellow{ stroke:var(--string-yellow); }
.board-strings-layer path.black{ stroke:var(--string-black); }

.board-note, .board-photo{ z-index:2; }

/* Evidence stamp */
.stamp{
  position:absolute; z-index:3; pointer-events:none; user-select:none;
  transform-origin:center center;
  mix-blend-mode:multiply;
  font-family:"Impact", "Anton", "Arial Black", sans-serif;
  text-transform:uppercase; letter-spacing:1px;
  color:#c0392b;
  border:5px solid #c0392b; padding:.3rem .7rem; border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
  background: rgba(255,255,255,.05);
}
.stamp span{ display:inline-block; transform:skew(-5deg); }
.stamp-urgent{ color:#8e44ad; border-color:#8e44ad; }
.stamp-classified{ color:#2c3e50; border-color:#2c3e50; }

/* Coffee ring */
.coffee-ring{
  position:absolute; width:220px; height:220px; z-index:1; pointer-events:none;
  background-image:url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiPgogIDxkZWZzPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJyZyIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9InJnYmEoMTIwLDc1LDAsMCkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9InJnYmEoMTIwLDc1LDAsMC4zNSkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDEyMCw3NSwwLDApIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8Y2lyY2xlIGN4PSIxMTAiIGN5PSIxMTAiIHI9IjkwIiBmaWxsPSJ1cmwoI3JnKSIvPgo8L3N2Zz4K'); background-size:contain; background-repeat:no-repeat;
  mix-blend-mode:multiply; opacity:.75;
}

/* Watermark (diagonal big text) */
.wm-confidential{
  position:absolute; left:50%; top:50%; transform-origin:center center;
  font-size: clamp(48px, 12vw, 160px);
  font-weight: 900;
  color:#b30000;
  opacity:.12;
  letter-spacing: 0.05em;
  mix-blend-mode:multiply;
  translate:-50% -50%;
  z-index: 0;
  pointer-events:none;
}

/* Rubber date stamp */
.date-stamp{
  position:absolute; z-index:3; pointer-events:none; user-select:none;
  color:#2c3e50; border:3px solid #2c3e50; padding:.2rem .6rem; border-radius:4px;
  font-family:"Courier New", monospace; font-weight:700;
  background: rgba(255,255,255,.05); mix-blend-mode:multiply;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.date-stamp span{ display:inline-block; transform:skew(-4deg); }