/* 04 — KEEPSAKE
   The real thing mounted on a framed cream card, the way a kept thing
   is. EB Garamond, the Letters book face, tells the story; Lexend carries
   the label and the numbers. The Evolution slide is a card too. */

.th-keepsake { --paper: #EFE5D6; --card: #FBF7EF; --ink: #2B1E16; }

.th-keepsake.cover { background: var(--paper); color: var(--ink); --stage-mt: 50px; --photo-s: .8; --icon-s: .58; }
.th-keepsake.cover::after,
.th-keepsake.story::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain-url); background-size: 240px 240px;
  mix-blend-mode: multiply; opacity: .09;
}
.th-keepsake .series { color: rgba(43, 30, 22, .56); }
.th-keepsake .hook {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 72px; line-height: 1.06; font-weight: 500; letter-spacing: -.8px;
}
.th-keepsake .stat {
  margin-top: 28px; font-size: 42px; line-height: 1.3; font-weight: 400;
  letter-spacing: -.3px; color: rgba(43, 30, 22, .80);
}
.th-keepsake .stat b { color: var(--ink); }

.th-keepsake .plate {
  background: var(--card);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .10), 0 16px 40px rgba(60, 40, 20, .14);
}
.th-keepsake .plate::before,
.th-keepsake.evolution .story-body::before {
  content: ""; position: absolute; inset: 18px; pointer-events: none;
  border: 2px solid rgba(43, 30, 22, .16);
}
.th-keepsake .plate .obj { box-shadow: 0 1px 3px rgba(60, 40, 20, .14), 0 10px 24px rgba(60, 40, 20, .14); }
.th-keepsake .plate .obj.photo { border-radius: 2px; }
.th-keepsake .foot { color: rgba(43, 30, 22, .58); }

.th-keepsake.story { color: var(--ink); --copy-track: 0; --copy-weight: 500; }
.th-keepsake .story-copy { font-family: 'EB Garamond', Georgia, serif; }
.th-keepsake .kicker { color: rgba(43, 30, 22, .52); }

.th-keepsake.origin { background: #F6EFE4; --copy-size: 48px; --copy-lh: 1.32; }

.th-keepsake.evolution {
  background: var(--paper);
  --st-pt: 140px; --st-pb: 100px;
  --copy-size: 45px; --copy-lh: 1.32; --copy-gap: 26px;
}
.th-keepsake.evolution .story-body {
  max-width: none;
  padding: 80px 78px;
  background: var(--card);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .10), 0 16px 40px rgba(60, 40, 20, .14);
}