/* Shared look: the wishes wall cards. */
/* notes: textured white cardstock, each with its own tilt, tone and (sometimes) a strip of watercolor tape.
   Look is picked from the note id (data-v), so a card keeps its look when new notes land above it. */
.note{
  --tone:var(--card); --tilt:-.8deg; --nudge:0px; --w:100%; --ml:0%;
  display:inline-block; vertical-align:top; break-inside:avoid; width:var(--w); margin:0 0 20px var(--ml);  /* inline-block keeps the tape with its card across columns */ padding:18px 18px 14px; position:relative; border-radius:2px;
  background-color:var(--tone);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 .32 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 .2 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  box-shadow:
    0 1px 1px rgba(var(--shadow-rgb),.10),
    0 3px 6px -2px rgba(var(--shadow-rgb),.12),
    0 14px 22px -14px rgba(var(--shadow-rgb),.38),
    inset 0 0 0 1px rgba(var(--card-rgb),.55),
    inset 0 0 26px rgba(var(--shadow-rgb),.07);
  transform:translateX(var(--nudge)) rotate(var(--tilt));
}
.note[data-v="0"]{--tilt:-1.6deg}
.note[data-v="1"]{--tilt:1.2deg; --nudge:3px; --w:93%; --ml:6%}
.note[data-v="2"]{--tilt:-.5deg; --nudge:-2px; --w:96%}
.note[data-v="3"]{--tilt:2deg; --w:90%; --ml:4%}
.note[data-v="4"]{--tilt:-2.3deg; --nudge:2px}
.note[data-v="5"]{--tilt:.6deg; --nudge:-3px; --w:94%; --ml:3%}
/* watercolor tape on some cards */
.note[data-v="0"]::after, .note[data-v="3"]::after, .note[data-v="4"]::after{
  content:""; position:absolute; top:-9px; width:68px; height:20px; pointer-events:none;
  --tape:rgba(var(--wash-rgb),.55);
  background:linear-gradient(90deg, transparent, var(--tape) 5px, var(--tape) calc(100% - 5px), transparent);
  filter:url(#rough); mix-blend-mode:multiply;
}
.note[data-v="0"]::after{left:50%; transform:translateX(-50%) rotate(2deg)}
.note[data-v="3"]::after{left:-14px; transform:rotate(-38deg); top:-2px; width:56px}
.note[data-v="4"]::after{left:42%; transform:rotate(-4deg); --tape:rgba(var(--accent-rgb),.24)}
.note .kind{font:600 10px/1.3 var(--f-caps); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.note p{margin:4px 0 8px; white-space:pre-wrap; overflow-wrap:anywhere}
.note .by{font:400 26px/1 var(--f-script); color:var(--ink)}
.note .del{position:absolute; top:6px; right:6px; border:0; background:none; color:var(--accent); font:600 11px/1 var(--f-caps); letter-spacing:.12em; cursor:pointer; padding:4px}
.empty{font-style:italic; color:var(--soft); margin:18px 0 0}