/* Shared by the public site and the admin preview: book covers, polaroids, pins. */
.cover { position: relative; width: 100%; height: 100%; container-type: inline-size; overflow: hidden; background: #0c1110; border-radius: 2px; }
.cover > img { width: 100%; height: 100%; object-fit: cover; }
.cg {
  position: absolute; inset: 0; padding: 10cqw 9cqw 9cqw; display: flex; flex-direction: column; align-items: center; text-align: center; color: #efe6d2;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent, #7a2b2b) 62%, #0c1110), #0c1110 72%);
  outline: .7cqw solid rgba(239, 230, 210, .32); outline-offset: -4.5cqw;
}
.cg-series { font: 400 4.2cqw 'Special Elite', monospace; letter-spacing: .06em; opacity: .8; min-height: 1.3em; }
.cg-title { font: 400 15cqw/1.18 'Rakkas', serif; margin-top: 10cqw; text-wrap: balance; text-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .6); }
.cg-sub { font-size: 5.4cqw; margin-top: 4cqw; opacity: .85; text-wrap: balance; }
.cg-author { margin-top: auto; font-size: 5.6cqw; padding-top: 3cqw; border-top: .5cqw solid rgba(239, 230, 210, .5); width: 60%; opacity: .9; }
.ribbon { position: absolute; top: 4cqw; inset-inline-start: 4cqw; font: normal 600 4.4cqw/1 'IBM Plex Sans Arabic', sans-serif; background: #cf3a2f; color: #fff; padding: 1.6cqw 3.4cqw; border-radius: 99px; z-index: 2; }

/* polaroid pinned to the board */
.polaroid { --rot: 0deg; position: relative; margin: 0; padding: 10px 10px 40px; background: #f1eadb; color: #1b1812; box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 255, 255, .4) inset; transform: rotate(var(--rot)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.polaroid .ph { aspect-ratio: 2 / 3; background: #0c1110; }
.polaroid figcaption { position: absolute; inset: auto 8px 8px; text-align: center; font: 700 1.05rem/1.2 'Aref Ruqaa', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 35% 30%, #ff8a7d, #cf3a2f 45%, #7d1710); box-shadow: 0 4px 6px rgba(0, 0, 0, .55); }