.scd-peel { position: relative; width: 200px; height: 140px; margin: 0 auto; perspective: 1000px; cursor: pointer; }
.scd-peel__back, .scd-peel__front {
  position: absolute; inset: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  text-align: center;
}
.scd-peel__back {
  background: #faf3e3;
  color: #1a1a1a; padding: 16px;
  border: 1px solid #d4c8a3;
}
.scd-peel__seal {
  width: 38px; height: 38px;
  background: radial-gradient(circle at 35% 30%, #c44, #8b1a1a);
  color: #faf3e3;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 900 13px ui-serif, Georgia;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset -2px -3px 4px rgba(0,0,0,0.3);
  margin-bottom: 6px;
}
.scd-peel__back h4 { margin: 0; font: 700 14px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-peel__back p  { margin: 0; font: italic 11px/1.4 ui-serif, Georgia; color: #5a4a30; }
.scd-peel__front {
  background: #faf3e3;
  color: #1a1a1a;
  border: 1px solid #d4c8a3;
  transform-origin: top right;
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
}
.scd-peel__front::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 49%, #d4c8a3 49.5%, transparent 50.5%);
}
.scd-peel__monogram {
  font: 900 26px/1 ui-serif, Georgia; color: #8b1a1a; letter-spacing: 0.08em;
  border: 1.5px solid #8b1a1a; padding: 4px 10px; border-radius: 2px;
}
.scd-peel__line { font: italic 10px/1 ui-serif, Georgia; color: #5a4a30; letter-spacing: 0.12em; }
.scd-peel:hover .scd-peel__front { transform: rotate3d(-1, 1, 0, 75deg); }