/* ==========================================================================
   DETAILS: the small things that make the paper feel handled.
   Worn paper, tape, photo corners, a wax seal, a magnifying glass.
   Loaded last, so it can refine what book.css and papers.css set.
   ========================================================================== */

/* ------------------------------------------------------------------ worn paper */
.wear {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  box-shadow: inset 0 0 2.6em rgba(122, 78, 28, 0.2), inset 0 0 0.45em rgba(90, 55, 20, 0.2);
}
.wear::before, .wear::after, .wear .fp { display: none; }

/* a crease where the sheet was folded in three */
.w-0, .w-2, .w-3 {
  background:
    linear-gradient(180deg,
      transparent calc(var(--fold, 36%) - 0.35em),
      rgba(70, 42, 12, 0.1) calc(var(--fold, 36%) - 0.06em),
      rgba(255, 250, 232, 0.55) calc(var(--fold, 36%) + 0.08em),
      transparent calc(var(--fold, 36%) + 0.55em));
}

/* a coffee ring: darker at the rim, with a gap where the cup lifted */
.w-0::before, .w-2::before {
  display: block; content: '';
  position: absolute;
  left: var(--cx, 70%); top: var(--cy, 70%);
  width: 6.6em; height: 6.4em;
  transform: translate(-50%, -50%) rotate(var(--ra, 0deg));
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(closest-side, rgba(120, 70, 22, 0.05) 0 78%, rgba(110, 62, 18, 0.26) 90%, rgba(110, 62, 18, 0.07) 97%, transparent 100%);
  -webkit-mask-image: conic-gradient(#000 0 290deg, transparent 290deg 322deg, #000 322deg);
  mask-image: conic-gradient(#000 0 290deg, transparent 290deg 322deg, #000 322deg);
}

/* a staple, top left */
.w-1, .w-3 {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cg transform='rotate(-32 17 8)'%3E%3Crect x='3' y='7' width='28' height='4' rx='1.6' fill='rgba(0,0,0,.28)'/%3E%3Crect x='3' y='5' width='28' height='3.4' rx='1.4' fill='%238b8f93'/%3E%3Crect x='3' y='5' width='28' height='1.2' rx='.6' fill='%23dfe2e4'/%3E%3C/g%3E%3C/svg%3E") 0.9em 0.7em / 2.1em 1em no-repeat;
}
.w-3 {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cg transform='rotate(-32 17 8)'%3E%3Crect x='3' y='7' width='28' height='4' rx='1.6' fill='rgba(0,0,0,.28)'/%3E%3Crect x='3' y='5' width='28' height='3.4' rx='1.4' fill='%238b8f93'/%3E%3Crect x='3' y='5' width='28' height='1.2' rx='.6' fill='%23dfe2e4'/%3E%3C/g%3E%3C/svg%3E") 0.9em 0.7em / 2.1em 1em no-repeat,
    linear-gradient(180deg,
      transparent calc(var(--fold, 36%) - 0.35em),
      rgba(70, 42, 12, 0.1) calc(var(--fold, 36%) - 0.06em),
      rgba(255, 250, 232, 0.55) calc(var(--fold, 36%) + 0.08em),
      transparent calc(var(--fold, 36%) + 0.55em));
}

/* a folded bottom corner */
.w-1::after, .w-3::after {
  display: block; content: '';
  position: absolute; left: 0; bottom: 0; width: 1.9em; height: 1.9em;
  background:
    linear-gradient(225deg, #f6eed6 0, #d8c8a0 50%, transparent 50%),
    linear-gradient(45deg, #4a2e16 50%, transparent 50%);
  filter: drop-shadow(0.08em -0.08em 0.1em rgba(0, 0, 0, 0.35));
}

/* a thumb print */
.w-1 .fp, .w-2 .fp {
  display: block;
  position: absolute; left: var(--fx, 20%); top: var(--fy, 65%);
  width: 4.4em; height: 5.4em; opacity: 0.45;
  border-radius: 50%;
  transform: rotate(-24deg);
  background: repeating-radial-gradient(ellipse at 46% 56%, transparent 0 0.09em, rgba(70, 45, 20, 0.28) 0.12em 0.2em);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 28%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 28%, transparent 70%);
}

/* the blue RECEIVED stamp: one line, in the top margin so it never sits on the heading */
.rcv {
  position: absolute; top: 0.5em; right: 8em;
  display: flex; align-items: stretch; text-align: center;
  padding: 0.04em 0.45em 0.06em;
  border: 0.12em solid #2a4f86; border-radius: 0.2em;
  color: #2a4f86;
  font-family: var(--f-type); font-weight: 700; font-size: 0.66em; line-height: 1.2; letter-spacing: 0.14em;
  white-space: nowrap;
  transform: rotate(2.5deg);
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.rcv span + span { margin-left: 0.6em; padding-left: 0.6em; border-left: 0.1em solid #2a4f86; letter-spacing: 0.08em; }
@container paper (max-width: 27em) { .rcv { display: none; } }
.p-secret .wear, .p-bestiary .rcv { box-shadow: none; }
.p-secret .wear > *, .p-secret .wear::before, .p-secret .wear::after { display: none; }

/* ------------------------------------------------------------------ tape */
.fig::before, .sp-card::after {
  content: ''; position: absolute; z-index: 3;
  width: 4.4em; height: 1.35em;
  background: linear-gradient(180deg, rgba(255, 246, 190, 0.78), rgba(228, 200, 104, 0.6));
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
  pointer-events: none;
}
.fig { position: relative; }
.fig::before { top: -0.75em; left: 1.1em; transform: rotate(-6deg); }
.sp-card::after { top: -0.7em; left: 1.4em; transform: rotate(-7deg); }

/* the agency label on the cover is taped down too */
.tape {
  position: absolute; z-index: 3; width: 5.2em; height: 1.5em; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 246, 190, 0.82), rgba(226, 196, 98, 0.66));
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
}
.tp1 { top: -0.55em; left: -1.5em; transform: rotate(-38deg); }
.tp2 { bottom: -0.55em; right: -1.5em; transform: rotate(-38deg); }

/* ------------------------------------------------------------------ cover wear */
.front-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 16% 85%, rgba(90, 50, 15, 0.05) 0 4.5em, rgba(80, 42, 10, 0.26) 4.8em, rgba(80, 42, 10, 0.08) 5.3em, transparent 5.8em),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 72'%3E%3Cpath d='M92 28 Q118 16 146 6 Q118 17.5 92 28.6 Z' fill='rgba(50,24,6,0.44)'/%3E%3Cpath d='M93.5 29 Q118.5 17.5 144.5 7.5' stroke='rgba(255,245,220,0.35)' stroke-width='0.75' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10 62 Q48 48 86 31 Q48 49.5 10 62.6 Z' fill='rgba(50,24,6,0.42)'/%3E%3Cpath d='M11.5 62.8 Q48.5 49.5 84.5 32.2' stroke='rgba(255,245,220,0.32)' stroke-width='0.75' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 4.2em 31.5em / 7.6em 3.6em no-repeat;
}

/* ------------------------------------------------------------------ polaroid: it develops after the folder opens */
@keyframes develop {
  0% { filter: sepia(1) brightness(2.6) contrast(0.2) saturate(0); opacity: 0.35; }
  45% { filter: sepia(0.95) brightness(1.5) contrast(0.55) saturate(0.6); opacity: 0.8; }
  100% { filter: sepia(0.22) contrast(1.04); opacity: 1; }
}
.book[data-state='opening'] .lp-polaroid img,
.book[data-state='open'] .lp-polaroid img { animation: develop 4.4s 1s ease-out both; }
.lp-polaroid { transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.lp-polaroid:hover { transform: rotate(-1.2deg) translateY(-0.2em); }

/* ------------------------------------------------------------------ creature plates */
.cr-frame { background-color: #efe4c6; }
.cr-frame img { filter: sepia(0.16) contrast(1.04); }
.cr-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(135deg, #3b2817 50%, transparent 50%) left top / 1.35em 1.35em no-repeat,
    linear-gradient(225deg, #3b2817 50%, transparent 50%) right top / 1.35em 1.35em no-repeat,
    linear-gradient(45deg, #3b2817 50%, transparent 50%) left bottom / 1.35em 1.35em no-repeat,
    linear-gradient(315deg, #3b2817 50%, transparent 50%) right bottom / 1.35em 1.35em no-repeat;
}
.cr-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  transition: background-position 0.9s ease;
}
.cr-frame:hover::after, .cr-frame:focus-visible::after { background-position: -30% 0; }
.cr-frame[data-zoom] { cursor: zoom-in; }
.cr-frame[data-zoom]:focus-visible { outline: 0.15em solid var(--red); outline-offset: 0.2em; }

.cr-plate { flex: none; width: 14em; margin: 0; display: flex; flex-direction: column; gap: 0.4em; transform: rotate(-1.2deg); }
.cr-plate .cr-frame.lg { width: 100%; }
.cr-plate figcaption { display: flex; flex-direction: column; font-size: 1.55em; line-height: 0.95; color: var(--red-d); }
.cr-plate figcaption small { font-family: var(--f-type); font-size: 0.52em; letter-spacing: 0.04em; color: var(--brown); }
@container paper (max-width: 27em) { .cr-plate { width: min(12em, 70%); } }

.bs-card .cr-frame { transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.28s; }
.bs-grid li:nth-child(odd) .cr-frame { transform: rotate(-0.7deg); }
.bs-grid li:nth-child(even) .cr-frame { transform: rotate(0.8deg); }
.bs-grid li .bs-card:hover .cr-frame { transform: translateY(-0.3em) rotate(-1.6deg); box-shadow: 0.25em 0.45em 0 rgba(40, 18, 0, 0.3); }

/* ------------------------------------------------------------------ wax seal */
.lt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; margin-top: 0.4em; }
.lt-wax {
  flex: none; width: 6.2em; height: 6.2em; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(-9deg);
  filter: drop-shadow(0.1em 0.22em 0.1em rgba(50, 12, 6, 0.5));
  transition: transform 0.18s;
  animation: waxdrop 0.5s 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.lt-wax:hover { transform: rotate(-9deg) scale(1.05); }
.lt-wax:focus-visible { outline: 0.15em solid var(--red); outline-offset: 0.2em; border-radius: 50%; }
.lt-wax.pressed { animation: waxpress 0.4s ease-out; }
.wax-svg { display: block; width: 100%; height: 100%; }
@keyframes waxdrop { from { opacity: 0; transform: rotate(-9deg) translateY(-1.2em); } 60% { opacity: 1; transform: rotate(-9deg) scale(0.88); } }
@keyframes waxpress { 35% { transform: rotate(-9deg) scale(0.84); filter: drop-shadow(0 0.04em 0.04em rgba(50, 12, 6, 0.6)); } }

/* ------------------------------------------------------------------ lightbox with a loupe */
html.lb-lock { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.96);
  opacity: 0; transition: opacity 0.2s;
}
.lightbox[hidden] { display: none; }
.lightbox.show { opacity: 1; }
.lb-close {
  position: absolute; top: 16px; right: 16px;
  padding: 8px 18px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  background: transparent; color: #f4ead2;
  font: 600 14px/1 var(--f-sc, serif); letter-spacing: 0.14em;
  cursor: pointer;
}
.lb-close:hover, .lb-close:focus-visible { background: #f4ead2; color: #161210; }
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; margin: 0; }
.lb-plate {
  padding: 12px; background: #efe4c6;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-0.8deg);
  touch-action: none;
}
.lb-frame { position: relative; line-height: 0; }
.lb-img { display: block; width: auto; height: auto; max-width: min(86vw, 700px); max-height: calc(100vh - 170px); cursor: crosshair; user-select: none; -webkit-user-select: none; }
.lb-loupe {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 5px solid #3b2817;
  background-color: #efe4c6; background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 0 16px rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.lb-loupe.on { opacity: 1; }
.lb-loupe::after {
  content: ''; position: absolute; left: 118px; top: 124px; width: 13px; height: 48px; border-radius: 7px;
  background: linear-gradient(90deg, #6a4727, #2a1a0c);
  transform: rotate(-45deg); transform-origin: 50% 0;
}
.lb-cap { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #f4ead2; text-align: center; }
.lb-cap b { font: 400 30px/1 var(--f-gothic, serif); }
.lb-cap small { font: 400 13px/1.3 var(--f-type, monospace); color: rgba(244, 234, 210, 0.65); }