/* ---------- collage components ---------- */
.label-wrap > .inner { filter: drop-shadow(0 4px 2px rgba(43,37,34,.25)) drop-shadow(0 10px 14px rgba(43,37,34,.14)); position: relative; }
.label-paper {
  display: inline-block; white-space: nowrap;
  background: #fbf5e8 linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,0) 40%, rgba(120,90,50,.06));
  color: var(--ink); font-family: 'Patrick Hand', var(--hand); font-size: 34px; line-height: 1.12;
  padding: 12px 26px 12px;
}
.label-paper .ar { font-family: 'Amiri', serif; font-size: .92em; direction: rtl; unicode-bidi: isolate; }
.label-paper .sm { font-size: .72em; opacity: .8; }
.label-paper b { font-family: 'Caveat Brush', var(--hand); font-weight: 400; color: #9c4a2f; }
.chip .label-paper { background: #f6ecd6; padding: 9px 20px 9px 16px; display: inline-flex; align-items: center; gap: 10px; }
.chip .book { width: 32px; height: 32px; color: var(--green); flex: none; }
.washi {
  position: absolute; height: 34px; opacity: .82; mix-blend-mode: multiply;
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 12%, 96% 0, 100% 10%, 100% 90%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
}
.washi.sage { background: repeating-radial-gradient(circle at 10px 10px, rgba(255,255,255,.45) 0 3px, transparent 3.5px 14px), #9fb38c; }
.washi.mustard { background: repeating-linear-gradient(90deg, #e9b44c 0 10px, #f1c977 10px 20px); }
.washi.cream { background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px), #efe3c6; }
.washi.terra { background: #c97b5a; }
.washi.indigo { background: repeating-linear-gradient(45deg, #5d6ea3 0 6px, #6f80b5 6px 12px); }

.letter > .inner {
  font-family: 'Caveat Brush', var(--hand); color: var(--ink); white-space: nowrap; text-align: center;
  line-height: 1; filter: drop-shadow(0 3px 0 rgba(251,247,239,.85)) drop-shadow(0 6px 10px rgba(43,37,34,.18));
}
.letter.light > .inner { color: #fbf7ef; filter: drop-shadow(0 3px 0 rgba(31,42,77,.7)) drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.letter.wrap > .inner { white-space: normal; }
.arabic > .inner { font-family: 'Amiri', serif; direction: rtl; unicode-bidi: isolate; white-space: nowrap; line-height: 1.6; text-align: center; }

/* scroll with the words of the adhan */
.scroll-paper {
  background: #fbf3e2 linear-gradient(180deg, rgba(120,90,50,.10), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(120,90,50,.12));
  padding: 30px 46px 26px; border-radius: 6px; text-align: center; color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(43,37,34,.12);
}
.scroll-paper .ar-line { font-family: 'Amiri', serif; direction: rtl; font-size: 42px; line-height: 1.85; padding-bottom: .1em; white-space: nowrap; }
.scroll-paper .ar-line .x { font-family: 'Patrick Hand', var(--hand); font-size: 30px; color: #9c4a2f; direction: ltr; display: inline-block; margin-right: 12px; }
.scroll-paper .cap { font-family: 'Patrick Hand', var(--hand); font-size: 26px; color: #6b5a4b; margin-top: 10px; }
.scroll-rod { height: 26px; border-radius: 13px; background: linear-gradient(180deg, #a77a4c, #6f4a2b 60%, #8e6844); box-shadow: 0 4px 6px rgba(0,0,0,.25); margin: 0 -18px; }

/* captions */
#captions { position: absolute; left: 0; right: 0; top: 1482px; z-index: 800; display: flex; justify-content: center; pointer-events: none; }
#captions .cap {
  font-family: 'Patrick Hand', var(--hand); font-size: 46px; color: var(--ink); line-height: 1.15;
  background: #fbf5e8; padding: 10px 28px 12px; max-width: 960px; text-align: center;
  clip-path: polygon(0 6%, 3% 0, 30% 4%, 60% 0, 97% 3%, 100% 0, 99% 50%, 100% 96%, 70% 100%, 40% 96%, 8% 100%, 1% 95%, 0 50%);
}
#captions .capwrap { filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
#captions .w.future { opacity: .32; }
#captions .w.now { color: #9c4a2f; }
#captions .ar { font-family: 'Amiri', serif; font-size: 1.05em; vertical-align: -0.08em; color: var(--ink); }

/* phone screen UI on the end card */
.qaf-screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 70px 26px 30px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.qaf-screen .bubble { align-self: flex-end; background: #2b2522; color: #fbf7ef; border-radius: 20px 20px 4px 20px; padding: 12px 16px; font-size: 27px; line-height: 1.2; max-width: 92%; }
.qaf-screen .ans { background: #fff; border-radius: 18px; padding: 14px 14px; font-size: 24px; line-height: 1.3; color: #2b2522; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.qaf-screen .pill { display: inline-block; white-space: nowrap; margin: 10px 6px 0 0; padding: 4px 10px; border-radius: 999px; background: #e7f2ec; color: #1f6b4f; font-size: 19px; font-weight: 600; }
.qaf-screen .wm { height: 30px; align-self: center; margin-bottom: 6px; }