/* Homepage, Thortful card (October 2026): the flat lay. The envelopes are in proportion to the cards (24.6em wide for a
   16.8em card; they were 33em for 15, Silvia: "queda enorme el sobre"), closer to the phone and low enough that the top cards,
   9em higher when the run starts, are never cut by the card's top edge. From above, the orange iPhone lies on light tan paper (its
   orange, faded: each homepage cover has its own light tone) with Emma's four envelopes round it. When the sheet lands,
   each card goes into its envelope, its postmark lands with a little thud and the phone ticks that card, one by one:
   Anna, Tom, Sarah, Mark, until "All 4 cards are ready". Script: assets/js/home-thortful.js, which holds the first
   frame (the cards out of their envelopes) until the card plays. With reduced motion or no script this CSS is the last
   frame. Sized in em on a 144 x 100em world, 1em = 1% of the card's height. The envelopes and postmarks are images
   (web/home/, from _source-envelopes.html), so no live text is laid out again while the sheet travels. */
.ht{position:absolute;inset:0;background:#F2E4D8;overflow:hidden;container-type:size;pointer-events:none}
.ht-w{position:absolute;left:0;top:0;width:144em;height:100em;font-size:1cqh}
.ht-w>*{position:absolute}
/* the homepage sizes and zooms every img inside a card cover; nothing in here should follow that */
.sb-card .sb-card-image .ht img{position:absolute;inset:auto;max-width:none;object-fit:fill;transition:none;transform:none;display:block}
.sb-card .sb-card-image .ht .ht-peek{width:16.8em;height:23.74em;border-radius:.3em;z-index:2;box-shadow:0 1em 2em -.8em rgba(110,35,0,.45)}
.ht-env{width:24.6em;height:16.85em;z-index:3;border-radius:.4em;box-shadow:0 1.5em 2.3em -.95em rgba(110,35,0,.5),0 .3em .7em rgba(110,35,0,.18)}
.sb-card .sb-card-image .ht .ht-env>img{left:0;top:0;width:100%;height:100%}
.sb-card .sb-card-image .ht .ht-env>.ht-pm{left:62.1%;top:12.8%;width:29.1%;height:35.4%}
.ht-pm{transform:rotate(-14deg)}
/* the phone, lying on the table, in Thortful's orange edge */
.ht-ph{left:51.6em;top:8.1em;padding:.6em;border-radius:calc(5.176em + 1.9em);z-index:5;
  background:linear-gradient(140deg,#F6A46A,#E2712F 30%,#B9541F 55%,#E9864A 80%,#C76128);
  box-shadow:0 4em 7em -2em rgba(110,35,0,.5),0 1em 2.2em rgba(110,35,0,.25)}
.ht-pb{padding:1.3em;border-radius:calc(5.176em + 1.3em);background:#121212}
.ht-s{position:relative;width:36.97em;height:80em;border-radius:5.176em;overflow:hidden;background:#fff;isolation:isolate}
/* Safari on iPhone does not clip composited children to a rounded overflow box: an explicit rounded clip holds */
.ht-s{clip-path:inset(0 round 5.176em);-webkit-clip-path:inset(0 round 5.176em)}
.sb-card .sb-card-image .ht .ht-s>img{left:0;top:0;width:100%;height:100%}
.ht-s>*{position:absolute}
.ht-ring{width:7.7%;height:3.55%;margin:-1.775% 0 0 -3.85%;box-sizing:border-box;border:.4em solid #5CC12E;border-radius:50%;opacity:0;z-index:2}
.ht-isl{left:36.5%;top:1.5%;width:27%;height:3.3%;border-radius:999px;background:#000;z-index:3}
/* phones: the card is 4:5 (Silvia, 17 October 2026), an 80 x 100em world, so the flat lay is laid out again for it. The
   phone, the same size as on desktop (84% of the card's height), sits in the middle; the four envelopes, each with its
   card, are drawn at .68 (the card's slide into it too) so two fit on each side, still a mirror image round the phone,
   clear of it and of the card's edges. Left and top place each box's centre: envelope (9.9 or 70.1, its row), card
   0.27em towards the phone's far side and 3.44em above it, as on desktop at that scale */
@media (max-width:767px){
  .ht-w{width:80em}
  .ht-ph{left:19.6em}
  .ht-env,.sb-card .sb-card-image .ht .ht-peek{scale:.68}
  .ht-w>img:nth-of-type(1){left:1.23em!important;top:12.69em!important}
  .ht-w>div:nth-of-type(1){left:-2.4em!important;top:19.575em!important}
  .ht-w>img:nth-of-type(2){left:61.97em!important;top:11.19em!important}
  .ht-w>div:nth-of-type(2){left:57.8em!important;top:18.075em!important}
  .ht-w>img:nth-of-type(3){left:1.23em!important;top:59.69em!important}
  .ht-w>div:nth-of-type(3){left:-2.4em!important;top:66.575em!important}
  .ht-w>img:nth-of-type(4){left:61.97em!important;top:60.69em!important}
  .ht-w>div:nth-of-type(4){left:57.8em!important;top:67.575em!important}
}