/* =====================================================================
   The postage stamp and the scrapbook page. Every size inside is in container units (cqw),
   so one stamp looks identical at any size. The stamp itself is always 10em wide.
   ===================================================================== */
.stamp-wrap { position: relative; width: 10em; display: block; font-size: 16px; container-type: inline-size; color: var(--ink); }
.stamp-shadow { position: relative; width: 100cqw; height: 130cqw; box-sizing: border-box; padding: 2.5cqw;
  background: radial-gradient(circle at center, transparent 0 1.55cqw, #FFFCF5 1.75cqw) -2.5cqw -2.5cqw / 5cqw 5cqw;
  filter: drop-shadow(0 1.6cqw 2.2cqw rgba(74, 58, 36, .24)); }
.stamp { position: relative; height: 100%; box-sizing: border-box; background: #FFFCF5; padding: 4cqw 4cqw 0; display: flex; flex-direction: column; }
.stamp-photo { position: relative; flex: none; height: 108cqw; box-sizing: border-box; border: .6cqw solid #E4D8C2; overflow: hidden; background: #E9EEF0; }
.stamp-photo .photo, .stamp-photo .photo-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.photo-empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #F3EADB 0 2.4cqw, #EDE2CF 2.4cqw 4.8cqw); }
.photo-empty span { font-family: var(--serif); font-size: 18cqw; color: #C9B994; line-height: 1; }
.stamp-foot { flex: 1; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 4.3cqw; letter-spacing: .12em; color: #4A4740; white-space: nowrap; }
.postmark { position: absolute; top: -7cqw; right: -18cqw; width: 60cqw; transform: rotate(-9deg); opacity: .78; pointer-events: none; }
.postmark svg { width: 100%; height: auto; display: block; }
.stamp.developing .photo { animation: develop 1.5s ease both; }
.postmark.pending { animation: ink .5s 1.1s both; }
@keyframes develop { from { filter: blur(6px) saturate(.3); opacity: .55; } to { filter: none; opacity: 1; } }
@keyframes ink { from { opacity: 0; transform: rotate(-9deg) scale(1.25); } to { opacity: .78; transform: rotate(-9deg); } }

/* the small version used in the calendar: just the photo, with a white border like a little print */
.stamp-wrap.mini { width: 100%; height: 100%; font-size: inherit; }
.stamp-wrap.mini .stamp-shadow { width: 100%; height: 100%; padding: 0; background: none; filter: none; }
.stamp-wrap.mini .stamp { padding: 0; background: none; }
.stamp-wrap.mini .stamp-photo { height: 100%; border: 2.5px solid #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(70, 55, 30, .22); }
.stamp-wrap.mini .stamp-foot { display: none; }

/* ---- the scrapbook page ---- */
.page-frame { display: grid; place-items: center; --chrome: 330px; }
.page { position: relative; width: var(--pw, 100%); max-width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; overflow: hidden; border-radius: 6px; background-color: #FFFDF9; box-shadow: 0 18px 30px -18px rgba(70, 55, 30, .45), 0 0 0 1px #EEE5D5; font-family: var(--sans); color: var(--ink); }
.page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(120, 100, 70, .09) 0 .35cqw, transparent .45cqw); background-size: 4cqw 4cqw; }
.page-corner { position: absolute; right: -6cqw; top: -6cqw; width: 34cqw; height: 34cqw; transform: rotate(12deg); background-color: #FFFDF9; background-image: linear-gradient(90deg, rgba(160, 195, 226, .5) 50%, transparent 50%), linear-gradient(rgba(160, 195, 226, .5) 50%, transparent 50%); background-size: 5cqw 5cqw; }
.page-block { position: absolute; left: 13cqw; top: 9cqw; width: 66cqw; height: 72cqw; border-radius: 1cqw; transform: rotate(4deg); }
.page-stamp { position: absolute; left: 21cqw; top: 9cqw; width: 52cqw; transform: rotate(-3deg); }
.page-tape { position: absolute; left: 35cqw; top: 5cqw; width: 26cqw; height: 6.5cqw; transform: rotate(-7deg); background-color: rgba(255, 255, 255, .55);
  background-image: linear-gradient(90deg, rgba(150, 188, 224, .62) 50%, transparent 50%), linear-gradient(rgba(150, 188, 224, .62) 50%, transparent 50%); background-size: 2.6cqw 2.6cqw;
  clip-path: polygon(2% 0, 98% 0, 100% 25%, 97% 50%, 100% 75%, 98% 100%, 2% 100%, 0 72%, 3% 50%, 0 28%); }
.page-text { position: absolute; left: 10cqw; right: 10cqw; top: 88cqw; z-index: 1; }
.page-title { font-family: var(--serif); font-weight: 600; font-size: 7.6cqw; line-height: 1.1; overflow-wrap: anywhere; }
.page-date { margin-top: 1.6cqw; font-family: var(--mono); font-size: 2.8cqw; letter-spacing: .2em; color: var(--muted); }
.page-thought { margin-top: 2.2cqw; font-family: var(--serif); font-style: italic; font-size: 4.4cqw; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.page-text.long .page-thought { font-size: 3.7cqw; }
.decor-layer { position: absolute; inset: 0; z-index: 2; }
.decor-layer:not(.editing) { pointer-events: none; }
.deco { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); line-height: 0; }
.deco > svg { width: 100%; height: auto; display: block; overflow: visible; pointer-events: none; }
.decor-layer.editing .deco { touch-action: none; cursor: grab; }
.deco.landing { animation: settle .32s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes settle { from { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.3); opacity: .2; } to { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); opacity: 1; } }
.deco.k-stickers { filter: drop-shadow(0 1.5px 2px rgba(60, 40, 20, .3)); }
.deco.k-tape { filter: drop-shadow(0 1px 1.2px rgba(60, 40, 20, .28)); opacity: .94; }
.deco.k-paper { filter: drop-shadow(0 1px 1.5px rgba(60, 40, 20, .2)); }
.deco.k-doodles { opacity: .92; }
.deco.k-doodles svg, .deco.k-stickers svg.art { overflow: visible; }
.deco.selected { outline: 1.5px dashed var(--link); outline-offset: 5px; filter: none; }
.deco-ui { position: absolute; inset: 0; pointer-events: none; }
.deco-del, .deco-handle { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--link); color: var(--link); display: grid; place-items: center; pointer-events: auto; touch-action: none; box-shadow: 0 2px 6px rgba(46, 49, 52, .2); }
.deco-del { left: -17px; top: -17px; color: var(--danger); border-color: var(--danger); }
.deco-handle { right: -17px; bottom: -17px; }
.deco-del svg, .deco-handle svg { width: 15px; height: 15px; }