/* ==========================================================================
   Torn-paper edge masks
   --------------------------------------------------------------------------
   Every cutout on the page is derived from one hand-torn band
   (assets/Mask group.png), so all the edges share the same fibre character.
   assets/masks/ holds the crops:

     tear-band    the whole band, torn top and bottom
     tear-up      transparent above a torn edge, solid below
     tear-down    solid above a torn edge, transparent below
     *-2          the same cuts mirrored, so no two joins on the page repeat

   These are applied with mask-image, so whatever sits underneath - a flat
   colour or a photograph - stays a plain rectangle. To change a picture,
   change its src; the tear is never baked into the image file.
   ========================================================================== */
:root{
  --tear-band:   url("../assets/masks/tear-band.png");
  --tear-up:     url("../assets/masks/tear-up.png");
  --tear-up-2:   url("../assets/masks/tear-up-2.png");
  --tear-down:   url("../assets/masks/tear-down.png");
  --tear-down-2: url("../assets/masks/tear-down-2.png");

  /* a shallower cut, for the top and bottom of a card rather than a section */
  /* the foot of the dusk scene: 1536 x 288, so 5.33:1 */
  --tear-foot:     url("../assets/masks/foot-tear.svg");
  --card-bottom:   url("../assets/masks/card-bottom.png");
  --card-bottom-2: url("../assets/masks/card-bottom-2.png");

  /* The rooms section is cut with its own drawn pair, one edge across the
     whole screen rather than one per card: 4587 x 1197 each, the torn run near
     one end of the file and flat fill for the rest, so neither is a rotation
     of the other. Both are the drawn cut with its long sweeping wave taken
     out — the run keeps its fibre but holds to a near-straight line, spanning
     103 units of the 1197 rather than 282. See .tear--rooms-top /
     .tear--rooms-bottom for how only the torn end is brought into the strip. */
  --rooms-top-svg:    url("../assets/masks/rooms-top.svg");
  --rooms-bottom-svg: url("../assets/masks/rooms-bottom.svg");

  /* The crops are 6.6:1, so a strip at this height keeps the tear undistorted —
     but only at the width it was set for. Fixed at 13.5rem the strip stayed
     216px tall on a 390px phone, where an undistorted tear is 59px: the same
     artwork stretched three and a half times vertically, which is what read as
     a smeared edge on mobile.

     15.15vw is 1/6.6 of the viewport, so the tear holds its own ratio at every
     width. The clamp keeps the desktop value exactly where it was (15.15vw
     passes 216px at 1426, so anything wider stays at 13.5rem) and stops the
     strip disappearing on a very narrow screen. */
  --tear-h: clamp(3.25rem, 15.15vw, 13.5rem);
  /* the transition band's join into the rooms: everything it overlaps there is
     empty ground above a heading, so it runs only as deep as its cut needs */
  --tear-h-join: 5rem;
  /* Depth of the strips that cut the rooms section top and bottom. The drawn
     cut keeps its own proportions inside them (mask-size:100% auto), so this
     only has to clear the torn run: the run sits between 6.4% and 15% of a
     mask that is 100vw / 3.83 tall, so it is done with by 3.9vw. In vw, not
     rem, so the relationship holds at every width. */
  --card-tear-h: 5vw;
  /* how far up from the card's foot the bottom cut's fill can reach — what
     the copy has to stay clear of */
  --card-tear-clear: 3.4vw;
}