/* The album we had, now a page: prints, a note, two badges and a signature, all draggable. */
.album { background: var(--bg); color: var(--ink); }
.album-page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 32px 160px; display: flex; flex-direction: column; align-items: center; }
.album-top { width: 100%; max-width: 520px; margin-bottom: 28px; }

.album-copy { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; font-weight: 400; line-height: 150%; opacity: 0; transform: translateY(12px); transition: opacity .6s .1s, transform .8s .1s cubic-bezier(.16,1,.3,1); }
.album.open .album-copy { opacity: 1; transform: none; }

.poster { position: relative; width: 100%; max-width: 1040px; aspect-ratio: 1040 / 720; margin-top: 56px; }
.pol { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; z-index: calc(30 - var(--i)); left: var(--x); top: var(--y); width: var(--w); padding: 0; background: #fafafa; border: 0; border-radius: 3px; padding: 7px 7px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px -6px rgba(0,0,0,.22); opacity: 0; transform: translate(0, 40px) rotate(0deg) scale(.9); transition: opacity .5s calc(var(--i) * 45ms + 150ms), transform .8s calc(var(--i) * 45ms + 150ms) cubic-bezier(.16,1,.3,1), left .6s cubic-bezier(.16,1,.3,1), top .6s cubic-bezier(.16,1,.3,1), width .6s cubic-bezier(.16,1,.3,1), filter .4s; }
.pol img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1px; background: #e9e9e9; pointer-events: none; user-select: none; }
.album.open .pol { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r)); }
.album.open .pol:hover { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) * .6)) scale(1.025); transition-delay: 0s; }
.album.open .pol.drag { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) * .3 + var(--tilt, 0deg))) scale(1.06); box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 26px 44px -10px rgba(0,0,0,.34); transition: box-shadow .25s; transition-delay: 0s; cursor: grabbing; }
.pol:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:root[data-theme="dark"] .pol { background: #f1f1f1; }
.note { position: absolute; left: -1%; top: 27%; width: 19%; z-index: 40; padding: 12px 14px 14px; border-radius: 6px; background: linear-gradient(#f9d648 0 26px, #fbe88a 26px); color: #4a3200; font-family: "Bradley Hand", "Noteworthy", "Segoe Print", "Comic Sans MS", cursive; transform: translateY(30px) rotate(-6deg); opacity: 0; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 22px -6px rgba(0,0,0,.3); transition: opacity .5s .6s, transform .8s .6s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.note { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.album.open .note { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(-6deg); }
.album.open .note.ready { transition: opacity .5s, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
.album.open .note.drag { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(-1.8deg + var(--tilt, 0deg))) scale(1.06); box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 26px 44px -10px rgba(0,0,0,.34); transition: box-shadow .25s; cursor: grabbing; }
.badge { position: absolute; left: var(--x); top: var(--y); width: 58px; height: 58px; z-index: 35; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; opacity: 0; transform: scale(.6) rotate(var(--r)); transition: opacity .5s .7s, transform .8s .7s cubic-bezier(.16, 1, .3, 1); }
.badge svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.album.open .badge { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r)); }
.album.open .badge.ready { transition: opacity .5s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.album.open .badge.drag { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) * .3 + var(--tilt, 0deg))) scale(1.12); transition: none; cursor: grabbing; }
.note b { display: block; font-size: 18px; margin: -4px 0 12px; font-weight: 700; }
.note ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.55; }
.note li::before { content: "- "; }

.sign { margin-top: 10px; width: 150px; cursor: pointer; }
.sig-svg { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-theme="dark"] .sig-svg { filter: invert(1); }
.sp { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); }
.sign.in .sp { animation: sdraw var(--t) cubic-bezier(.45,.05,.4,1) var(--d) forwards; }
@keyframes sdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sp { stroke-dashoffset: 0; } .sign.in .sp { animation: none; } .pol, .note, .album-copy { transition: none; } }
.pol:nth-of-type(1) { --x: 39%; --y: 24%; --r: -3deg; --w: 22%; --mx: 24%; --my: 0%; --mr: -3deg; --mw: 52%; }
.pol:nth-of-type(2) { --x: 3%; --y: 6%; --r: -7deg; --w: 17%; --mx: 2%; --my: 34%; --mr: -6deg; --mw: 38%; }
.pol:nth-of-type(3) { --x: 17%; --y: 44%; --r: 5deg; --w: 17%; --mx: 58%; --my: 30%; --mr: 6deg; --mw: 38%; }
.pol:nth-of-type(4) { --x: 27%; --y: 2%; --r: 4deg; --w: 17%; --mx: 30%; --my: 46%; --mr: 3deg; --mw: 38%; }
.pol:nth-of-type(5) { --x: 66%; --y: 8%; --r: 6deg; --w: 17%; --mx: 60%; --my: 52%; --mr: -5deg; --mw: 38%; }
.pol:nth-of-type(6) { --x: 80%; --y: 38%; --r: -5deg; --w: 17%; --mx: 2%; --my: 62%; --mr: 4deg; --mw: 38%; }
.pol:nth-of-type(7) { --x: 56%; --y: 50%; --r: -3deg; --w: 17%; --mx: 34%; --my: 72%; --mr: -4deg; --mw: 36%; }
.pol:nth-of-type(8) { --x: 2%; --y: 48%; --r: 3deg; --w: 17%; --mx: 62%; --my: 74%; --mr: 6deg; --mw: 36%; }
.pol:nth-of-type(9) { --x: 46%; --y: 0%; --r: -6deg; --w: 17%; --mx: 4%; --my: 84%; --mr: -3deg; --mw: 34%; }
.pol:nth-of-type(10) { --x: 82%; --y: 2%; --r: 5deg; --w: 16%; --mx: 34%; --my: 90%; --mr: 5deg; --mw: 34%; }
.pol:nth-of-type(11) { --x: 31%; --y: 60%; --r: 6deg; --w: 17%; --mx: 64%; --my: 92%; --mr: -6deg; --mw: 34%; }
@media (max-width: 700px) {
    .album-page { padding: 40px 20px 80px; }
  .poster { aspect-ratio: 390 / 640; margin-top: 40px; }
  .pol { left: var(--mx); top: var(--my); width: var(--mw); padding: 5px 5px 18px; }
  .album.open .pol { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--mr)); }
    .note { left: 2%; top: 20%; width: 34%; padding: 8px 10px 10px; }
    .badge { left: var(--mx); top: var(--my); width: 46px; height: 46px; }
  .note b { font-size: 14px; margin-bottom: 6px; } .note ul { font-size: 12px; }
}

.album-head { width: min(var(--col), calc(100% - var(--pad) * 2)); margin: 0 auto; }
@media (max-width: 700px) { .album-page { padding: 8px 20px 140px; } }

.album-copy { max-width: 571px; gap: 20px; line-height: 1.5; text-align: left; align-items: flex-start; }
.album-copy h1 { margin: 0 0 4px; max-width: 461px; }
.album-copy .say { margin-top: -10px; color: var(--text); }
.album-copy .say span { color: var(--dim); }
.album-copy .say a { text-decoration: underline; text-decoration-color: var(--ul); text-underline-offset: 2px; transition: text-decoration-color .2s ease; }
.album-copy .say a:hover { text-decoration-color: var(--ink); }

/* The text lines up with the profile picture: same column, same left edge. */
.album-copy { width: min(var(--col), 100%); max-width: none; align-items: flex-start; }
.album-copy p { max-width: 571px; }
@media (max-width: 1000px) { .album-page { padding-inline: var(--pad); } }