/* Three independent static art owners: original complete blossom/strands,
   exact approved upright strip, and source-preserved whole hearts-only groups.
   Accepted content reservation is independent of the pile's natural height. */
html body[data-frame="heart-envelope"]{
  position:relative;padding:40px 20px;
}
[data-frame="heart-envelope"] .scrapbook{
  --heart-width:30px;
  --letter-height:clamp(30px,4vw,58px);
  --pile-height:calc(min(740px,100vw - 40px) * 188 / 2169);
  --top-height:calc(min(740px,100vw - 40px) * 489 / 1706);
  --branch-clearance:78px;
  position:relative;
  padding:var(--branch-clearance) 44px calc(var(--letter-height) + 12px);
}
/* Preserve accepted identity/content geometry below all four complete strands. */
[data-frame="heart-envelope"] .identity{
  min-height:calc(var(--top-height) - var(--branch-clearance) + 32px);
  padding-right:max(0px,calc(var(--top-height) * 173 / 489 - 36px));
}
.heart-envelope-frame{
  position:absolute;inset:-2px;z-index:3;pointer-events:none;user-select:none;
}
.heart-envelope-frame *{pointer-events:none;user-select:none}
.heart-envelope-frame img{display:block;max-width:none;height:auto;animation:none;transition:none}
.heart-envelope-frame__top{display:block;position:absolute;top:0;left:0;width:100%}
.heart-envelope-frame__top img{width:100%;height:auto}
/* Full groups occupy the perimeter gutter; transparent sparkle margins may
   overhang a few pixels without covering the independent inner ribbons. */
.heart-envelope-frame__side{
  position:absolute;top:var(--branch-clearance);bottom:calc(var(--letter-height) + 8px);
  width:var(--heart-width);
}
.heart-envelope-frame__side--left{left:-6px}
.heart-envelope-frame__side--right{right:-12px;top:calc(var(--top-height) + 10px)}
.heart-envelope-frame__side img{position:absolute;left:0;width:100%;height:auto}
.heart-envelope-frame__bottom{
  position:absolute;left:0;right:0;bottom:min(calc(var(--pile-height) / -3),calc(var(--letter-height) + 10px - var(--pile-height)));height:var(--pile-height);
}
/* One unchanged continuous arrangement; no repeat, end masking or squeezing. */
.heart-envelope-frame__bottom>img{position:absolute;left:0;bottom:0;width:100%;height:auto}
/* Absolute trailing clearance extends scroll bounds without grid recentering. */
.heart-envelope-frame__bottom::after{content:"";position:absolute;top:100%;left:0;width:1px;height:20px}
@media(max-width:620px){
  html body[data-frame="heart-envelope"]{padding:20px 12px}
  [data-frame="heart-envelope"] .scrapbook{
    --heart-width:28px;
    --pile-height:calc(min(450px,100vw - 24px) * 188 / 2169);
    --top-height:calc(min(450px,100vw - 24px) * 489 / 986);
    --branch-clearance:calc(var(--top-height) + 12px);
    padding:var(--branch-clearance) 34px calc(var(--letter-height) + 12px);
  }
  [data-frame="heart-envelope"] .identity{min-height:90px;padding:9px 0}
  .heart-envelope-frame__side--left{left:-12px;top:60px}
}