@font-face {
  font-family: 'Memory Handwriting';
  src: url('fonts/GamjaFlower-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.space-page #main .story-letter {
  --story-line-height: 48px;
  --story-paper-inset: clamp(30px, 5vw, 72px);
  position: relative;
  padding: 36px var(--story-paper-inset) 42px;
  border: 1px solid #d9c7ab;
  border-radius: 8px 8px 18px 8px;
  background: radial-gradient(ellipse at 100% 100%, #edd6cc45, transparent 45%), radial-gradient(ellipse at top left, #fffefb, transparent 65%), radial-gradient(#b3a18612 .65px, transparent .8px), #fcf8ed;
  background-size: auto, auto, 5px 5px, auto;
  box-shadow: 0 18px 48px -24px #6e533c40, 0 3px 8px #66573a06, inset 0 0 0 6px #fffdf6b3, inset 0 0 0 7px #d9c7ab50;
}
.space-page #main .story-letter::before {
  content: '';
  position: absolute;
  inset: 32px auto 32px calc(var(--story-paper-inset) - 18px);
  width: 1px;
  background: linear-gradient(transparent, #c6a89470 6%, #c6a89470 94%, transparent);
  pointer-events: none;
}
.space-page #main .story-letter .story-text {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--story-line-height);
  color: #6e7466;
  font: 400 29px/var(--story-line-height) 'Memory Handwriting', var(--serif);
  letter-spacing: .015em;
  text-align: left;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--story-line-height) - 1px), #c4baa476 calc(var(--story-line-height) - 1px), #c4baa476 var(--story-line-height));
  background-position: 0 -7px;
}
.space-page #main .story-letter .story-signoff {
  padding-top: 0;
  padding-bottom: 16px;
  color: #786556;
}
.space-page #main .story-letter-ending {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 20vw, 230px);
  align-items: end;
  gap: clamp(16px, 3vw, 40px);
}
.space-page #main .story-letter .story-sketch {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 20px auto;
  opacity: .88;
}
.space-page #main .story-letter-ending--without-portrait { grid-template-columns: minmax(0, 1fr); }
.space-page #main .story-paper-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 25px; padding-bottom:17px; border-bottom:1px solid #d6c3a44d; }
.space-page #main .story-paper-heading>span { color:#947d60; font:12px/1.7 var(--serif); letter-spacing:.12em; }
.space-page #main .story-paper-heading>img { flex-shrink:0; opacity:.86; }
.space-page #main .story-farewell { min-width:0; }
.space-page #main .story-heart-divider { display:flex; align-items:center; gap:14px; max-width:200px; margin:0 0 18px; }
.space-page #main .story-heart-divider>span { flex:1; height:1px; background:linear-gradient(90deg, transparent, #c8a87588); }
.space-page #main .story-heart-divider>span:last-child { transform:rotate(180deg); }
.space-page #main .story-love-signature { font:15px/1.9 var(--serif); color:#967d65; margin:20px 0 8px; }
.space-page #main .story-love-signature>span { color:#b98781; padding-left:8px; font-size:22px; }
.space-page #main .story-paper-footer { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid #d6c3a44d; }
.space-page #main .story-paper-footer>span { font:9px/1.6 var(--sans); color:#9b876d; letter-spacing:.2em; }
@media (max-width: 720px) {
  .space-page #main .story-letter { --story-line-height: 40px; --story-paper-inset: 26px; padding-block: 24px 26px; }
  .space-page #main .story-letter::before { left: 13px; inset-block: 16px; }
  .space-page #main .story-letter .story-text { font-size: 24px; letter-spacing: 0; background-position: 0 -6px; }
  .space-page #main .story-letter-ending { display: block; }
  .space-page #main .story-letter .story-sketch { width: min(180px, 62%); margin-top: -12px; margin-bottom: 4px; }
  .space-page #main .story-paper-heading { margin-bottom:20px; gap:8px; }
  .space-page #main .story-paper-heading>span { font-size:10px; letter-spacing:.07em; }
  .space-page #main .story-paper-heading>img { width:40px; height:40px; }
  .space-page #main .story-love-signature { font-size:13px; }
  .space-page #main .story-paper-footer { margin-top:24px; }
}
@media (max-width: 360px) {
  .space-page #main .story-letter { --story-paper-inset: 20px; }
  .space-page #main .story-letter::before { left: 9px; }
}