/* Pressed letter (addon/story/004) — inv05_more w3 (INV-05 v1.1/v2.1, A1359, D-031/D-032/D-034/D-035).
   The story as a letter on a torn cotton sheet: ev005's torn top and bottom edges with the same mask method, the
   shadow following the tear (the filter sits on the unmasked parent only). The title writes on, the lines rise once,
   and the couple's names sign it. A pressed eucalyptus sprig (euc-b, mirrored) rests on the sheet's top-right
   corner, its shadow under it; the top padding keeps the title ≥ 32 px clear of it. The sheet is laid down with the
   scroll, both ways (section.js). AG-T053: the torn-edge masks are CSS images, so they attach only when the section
   comes near (.is-near, section.js), at once in reduced motion and without scripts; until then the sheet, far below
   the first screen, is a plain rectangle nobody sees. */
.st004 {
  --st004-eh: 34px; --st004-sprig: min(42%, 210px); --st004-rot: 16deg;
  position: relative; padding: var(--k-section-pad) var(--k-gutter); background: var(--k-light-ground); color: var(--k-ink);
  text-align: center; touch-action: pan-y;
}
.st004__letter { position: relative; max-width: 640px; margin: 0 auto; }
.st004__paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgb(74 63 53 / .14)) drop-shadow(0 -2px 8px rgb(74 63 53 / .06)); }
.st004__sheet { position: absolute; inset: 0; background: var(--k-grain), var(--k-card); }
.st004.is-near .st004__sheet, .js.motion-reduce .st004 .st004__sheet, html:not(.js) .st004 .st004__sheet {
  -webkit-mask: url("assets/edge-top.webp") left top / auto var(--st004-eh) repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--st004-eh) + 2px) no-repeat, url("assets/edge-bot.webp") left bottom / auto var(--st004-eh) repeat-x;
  -webkit-mask-composite: source-over;
  mask: url("assets/edge-top.webp") left top / auto var(--st004-eh) repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--st004-eh) + 2px) no-repeat, url("assets/edge-bot.webp") left bottom / auto var(--st004-eh) repeat-x;
  mask-composite: add;
}
.st004__inner { position: relative; z-index: 1; padding: calc(var(--st004-sprig) * .5 + 52px) clamp(24px, 7vw, 64px) calc(var(--st004-eh) + 44px); }
.st004__title { text-wrap: balance; overflow-wrap: anywhere; }
.st004__text { max-width: var(--k-measure); margin: 30px auto 0; text-align: left; }
.st004__p { font: 400 1rem/1.8 var(--k-font-body); color: var(--k-ink); text-wrap: pretty; }
.st004__p + .st004__p { margin-top: 1.1em; }
.st004__sign { margin-top: 28px; font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.2 var(--k-font-script); color: var(--c-primary); overflow-wrap: anywhere; }

/* the sprig on the top-right corner: shadow, live stage (a margin around the sprig for the lifted shadow), sprig */
.st004__sprig { position: absolute; z-index: 2; top: -22px; right: -10px; width: var(--st004-sprig); aspect-ratio: 600 / 327; pointer-events: none; }
.st004__sprig-img, .st004__sprig-shadow { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; }
.st004__sprig-img { z-index: 2; transform: rotate(var(--st004-rot)); }
.st004__sprig-shadow { z-index: 0; transform: translate(4px, 7px) rotate(var(--st004-rot)); opacity: .75; }
.st004__stage { position: absolute; z-index: 1; inset: -40px -40px -48px -40px; pointer-events: none; }
/* live: the canvas draws the shadow from its first frame; the still copy steps aside in that frame */
.st004.is-live .st004__sprig-shadow { opacity: 0; }

@media (min-width: 768px) {
  .st004 { --st004-sprig: 250px; --st004-eh: 38px; }
  .st004__sprig { top: -30px; right: -36px; }
  .st004__p { font-size: 1.04rem; }
}