/* Painted banner for inside pages: a soft gradient band with white-framed postcards peeking up from the bottom edge. */
.ib { position: relative; overflow: hidden; margin: 6px 0 18px; border-radius: 28px; padding: 28px 0; background: linear-gradient(120deg, var(--a, #FFF4E2), var(--b, #FCE6D6) 55%, var(--c, #F3E6F6)); isolation: isolate; }
.ib::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -8%; top: -70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.65), transparent); z-index: -1; }
.ib-row { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2.4vw, 30px); padding: 0 16px; }
.ib-card { flex: none; width: clamp(84px, 10vw, 128px); aspect-ratio: 3 / 4; margin: 0; padding: 5px; border-radius: 18px; background: #fff; box-shadow: 0 18px 36px rgba(60,30,40,.22); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); animation: ib-in .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ib-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: #EFE9DC; }
.ib-card:nth-child(1) { --r: -9deg; --y: 10%; --i: 0; }
.ib-card:nth-child(2) { --r: -4deg; --y: 2%; --i: 1; }
.ib-card:nth-child(3) { --r: 2deg; --y: -6%; --i: 2; }
.ib-card:nth-child(4) { --r: 6deg; --y: 2%; --i: 3; }
.ib-card:nth-child(5) { --r: 10deg; --y: 10%; --i: 4; }
@keyframes ib-in { from { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(60%); } }
@media (max-width: 640px) {
  .ib { border-radius: 22px; padding: 22px 0; margin-bottom: 14px; }
  .ib-card { width: 88px; border-radius: 14px; padding: 4px; margin: 0; }
  .ib-card img { border-radius: 10px; }
  .ib-card:nth-child(1), .ib-card:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ib-card { animation: none; } }
/* series heroes: painted covers in the fan instead of drawn thumbnails */
.ot-fan img.ib-paint { object-fit: cover; background: #EFE9DC; }
/* one painted cover, shown in full */
.ot-fan.ib-one { height: auto; display: flex; justify-content: center; align-items: center; }
.ot-fan.ib-one img.ib-paint { position: relative; left: auto; top: auto; right: auto; width: min(100%, 300px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; transform: rotate(-2deg); border: 4px solid rgba(255,255,255,.92); border-radius: 22px; background: #EFE9DC; }
@media (max-width: 760px) { .ot-fan.ib-one { height: auto; padding: 4px 0 8px; } .ot-fan.ib-one img.ib-paint { width: min(70%, 240px); } }