/* The couple's pencil marks stay on the paper, not on a moving scroll layer. */
.archive-margin-notes {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  user-select:none; color:#987665;
  background:
    radial-gradient(ellipse at 102% 18%,#d7b1b33d,transparent 46%),
    radial-gradient(ellipse at -8% 81%,#9aabc72c,transparent 48%);
}
.archive-margin-notes[data-margin-variant="1"] {
  background:radial-gradient(ellipse at -4% 23%,#d7b1b337,transparent 45%),radial-gradient(ellipse at 100% 78%,#c8bc932b,transparent 45%);
}
.archive-margin-notes[data-margin-variant="2"] {
  background:radial-gradient(ellipse at 98% 66%,#c6a7ad30,transparent 45%),radial-gradient(ellipse at -3% 14%,#9aabc728,transparent 40%);
}
.margin-name-heart {
  position:absolute; width:300px; height:275px; right:-32px; top:23%;
  transform:rotate(9deg);
}
.margin-name-heart>svg { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.margin-heart-fill { fill:#c99f9a; opacity:.12; }
.margin-heart-outline { fill:none; stroke:#a77e70; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.25; }
.margin-heart-echo { opacity:.14; stroke-width:.7; }
.margin-heart-flourish { fill:none; stroke:#a77e70; stroke-width:1; stroke-linecap:round; opacity:.22; }
.margin-couple {
  position:absolute; left:17%; right:13%; top:30%; text-align:center;
  color:#6c7694; opacity:.36; font:32px/1.05 var(--hand); overflow-wrap:anywhere;
}
.margin-couple>span { display:block; }
.margin-couple>i { display:block; margin:1px 0; color:#a87c6b; font:italic 20px/1 var(--serif); }
.margin-couple.has-long-names { font-size:22px; }
.margin-name-whisper {
  position:absolute; top:22px; right:4%; max-width:35%;
  color:#777f99; opacity:.38; font:26px/1.35 var(--hand);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:rotate(-5deg);
}
.margin-name-whisper i { color:#a47d68; font-size:.8em; }
.margin-name-whisper b { font-size:.8em; font-weight:400; color:#a47d68; }
.archive-margin-notes[data-margin-variant="1"] .margin-name-whisper { left:4%; right:auto; transform:rotate(4deg); }
.margin-postmark {
  position:absolute; width:104px; height:104px; left:5%; top:14%;
  color:#9e7764; opacity:.28; transform:rotate(-17deg);
}
.margin-postmark>svg { width:100%; height:100%; overflow:visible; }
.margin-postmark circle,.margin-postmark path { fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; }
.margin-postmark text { fill:currentColor; font:8px var(--sans); letter-spacing:1.1px; }
.margin-postmark .margin-postmark-note { font:26px var(--hand); letter-spacing:0; }
.margin-pencil {
  position:absolute; width:180px; height:120px; left:3%; bottom:12%;
  color:#8a9078; opacity:.28;
}
.margin-pencil { fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.archive-margin-notes[data-margin-variant="1"] .margin-name-heart { right:auto; left:-34px; top:47%; transform:rotate(-12deg); }
.archive-margin-notes[data-margin-variant="1"] .margin-postmark { left:auto; right:5%; top:8%; transform:rotate(12deg); }
.archive-margin-notes[data-margin-variant="1"] .margin-pencil { left:auto; right:4%; bottom:7%; transform:rotate(14deg); }
.archive-margin-notes[data-margin-variant="2"] .margin-name-heart { top:8%; right:1%; transform:rotate(6deg); }
.archive-margin-notes[data-margin-variant="2"] .margin-postmark { top:auto; bottom:12%; left:3%; }
.flower-chapter .margin-postmark,.flower-chapter .margin-pencil { display:none; }
.flower-chapter .margin-name-heart { top:35%; }
.archive-closing .margin-name-heart { top:15%; }
.archive-closing .margin-postmark { top:auto; bottom:16%; }
@media(min-width:1600px) {
  .margin-name-heart { right:4%; }
  .archive-margin-notes[data-margin-variant="1"] .margin-name-heart { left:4%; }
}
@media(max-width:800px) {
  .margin-name-heart { width:205px; height:188px; right:-72px; top:13%; }
  .margin-name-whisper { top:3px; right:16px; max-width:calc(100% - 110px); font-size:21px; line-height:1.2; transform:none; }
  .archive-margin-notes[data-margin-variant="1"] .margin-name-whisper { left:16px; transform:none; }
  .margin-couple { font-size:25px; opacity:.32; }
  .margin-couple>i { font-size:15px; }
  .margin-couple.has-long-names { font-size:17px; }
  /* Names have their own clear margin on narrow pages, above the main copy. */
  .margin-couple { display:none; }
  .margin-postmark { width:66px; height:66px; left:2%; top:3%; opacity:.25; }
  .margin-pencil { width:114px; height:76px; left:-9px; bottom:7%; opacity:.24; }
  .archive-margin-notes[data-margin-variant="1"] .margin-name-heart { left:-76px; top:19%; }
  .archive-margin-notes[data-margin-variant="1"] .margin-postmark { right:2%; top:3%; }
  .archive-margin-notes[data-margin-variant="1"] .margin-pencil { right:-8px; bottom:5%; }
  .archive-margin-notes[data-margin-variant="2"] .margin-name-heart { right:-70px; top:21%; }
  .archive-margin-notes[data-margin-variant="2"] .margin-postmark { bottom:5%; left:2%; }
  .quiet-section .margin-name-heart { top:30%; }
  .quiet-section .margin-name-whisper { left:16px; right:auto; }
  .archive-closing .margin-name-heart { top:3%; right:-30px; opacity:.78; }
  .flower-chapter .margin-name-heart { top:38%; }
}
@media(max-width:360px) {
  .margin-name-heart { width:178px; height:164px; }
  .margin-couple { font-size:22px; }
  .margin-postmark { width:55px; height:55px; }
}