/* The unlock page arrives as a single sheet folded across its horizontal centre. paper-unfold.js
   wraps the page in .fold and animates a facsimile while the real page waits underneath. */
[data-unfold-state='waiting'],
[data-unfold-state='opening'] {
  opacity: 0;
}
.fold {
  display: flow-root;
  position: relative;
  isolation: isolate;
}
.fold__overlay {
  position: absolute;
  perspective: 5000px;
  pointer-events: none;
  z-index: 3;
}
.fold__panel {
  position: absolute;
  left: 0;
  width: 100%;
  transform-style: preserve-3d;
}
.fold__panel--top {
  top: 0;
  transform-origin: center bottom;
  z-index: 2;
}
.fold__panel--bottom {
  bottom: 0;
  z-index: 1;
}
.fold__face,
.fold__back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f4eaf2;
  backface-visibility: hidden;
}
/* Only the lower half casts the sheet's shadow, so no band appears at the crease when the real page takes over. */
.fold__face--bottom {
  box-shadow:
    0.5px 1px 1px #39112b24,
    1.5px 3px 4px -1px #39112b1c,
    6px 12px 26px -14px #39112b30;
}
.fold__back {
  /* Lifted 1px so the face's edge cannot bleed through while folded shut. */
  transform: rotateX(180deg) translateZ(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
  background: linear-gradient(170deg, #f7edf5, #e7d7e6);
  box-shadow:
    3px 6px 16px #39112b26,
    inset 0 -1px 0 #ad90a54d;
}
.fold__monogram {
  font: 64px/1 var(--serif);
  letter-spacing: -8px;
  color: #79536d;
}
.fold__amp {
  color: #b16b49;
  font-size: 0.8em;
}
.fold__date {
  font: 9px var(--text);
  letter-spacing: 0.23em;
  color: #79536d;
}
.fold__content {
  position: absolute;
  left: 0;
  width: 100%;
}
/* The clone keeps the page's classes, so its own margins and shadow are cancelled here. */
.fold__facsimile {
  margin: 0 !important;
  box-shadow: none;
}
.fold__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #48223466, transparent 80%);
}
.fold__shade--bottom {
  background: linear-gradient(to bottom, #48223466, transparent 80%);
}
.fold__crease {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #61415144;
  box-shadow: 0 1px 1px #fff8;
}

@media (prefers-reduced-motion: reduce) {
  .fold__overlay {
    display: none !important;
  }
  [data-paper-unfold] {
    opacity: 1 !important;
  }
}