/*
 * Sizes come from the designer's two artboards: mobile (375px wide) and
 * desktop (1920px wide). Each fluid value is written as
 *   clamp(<mobile>, <line through both artboards>, <desktop>)
 * so the page matches the mock at 375 and 1920 and interpolates in between.
 * The lettering is then scaled down by --scale.
 */

:root {
  --paper: #7e0a08;
  --card-width: min(84.27vw, 1569px);
  /* lettering size relative to the mock (1 = as designed) */
  --scale: 0.75;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  /* sacred-heart cursor (mouse only); the image-set versions add a sharp 2x image */
  cursor: url("/assets/cursor.png") 24 30, auto;
  cursor: -webkit-image-set(url("/assets/cursor.png") 1x, url("/assets/cursor@2x.png") 2x) 24 30, auto;
  cursor: image-set(url("/assets/cursor.png") 1x, url("/assets/cursor@2x.png") 2x) 24 30, auto;
}

body {
  margin: 0;
}

img {
  display: block;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* the mock stretches the paper texture over the whole page */
  background: var(--paper) url("/assets/texture.webp") center top / max(102%, 955px) 115% no-repeat;
}

.hero {
  padding: clamp(47px, 41.9px + 1.36vw, 68px) 0 50px;
}

.lockup {
  margin: 0 auto;
  width: calc(min(62.56vw, 481px) * var(--scale));
  /* on short screens, shrink so the date stays above the fold */
  width: calc(min(62.56vw, 481px, max(235px, (100svh - 118px) * 0.5574)) * var(--scale));
}

.lockup img {
  width: 100%;
  height: auto;
}

.hearts {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(62px, 32.7px + 7.74vw, 181px) 0 clamp(52px, 10.4px + 11.03vw, 222px);
  background-image: url("/assets/hearts.webp");
  background-image: image-set(
    url("/assets/hearts.avif") type("image/avif"),
    url("/assets/hearts.webp") type("image/webp")
  );
  background-position: center top;
  background-size: max(100%, 696px + 63.5vw) auto;
  background-repeat: no-repeat;
}

.card {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--card-width);
  min-height: calc(clamp(180px, 131.7px + 13.02vw, 382px) * var(--scale));
  /* keep the lettering between the corner flowers */
  padding: 0 calc(var(--card-width) * 0.11);
  background: url("/assets/texture.webp") center / 100% 100% no-repeat;
}

/* corner flowers + rules: one strip per edge, scaling with the card width */
.card__frame {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
}

.card__frame--top {
  top: 0;
}

.card__frame--bottom {
  bottom: 0;
}

.card__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.63em 0.59em;
  margin: 0;
  /* 1em = cap height of the lettering */
  font-size: calc(clamp(25.65px, 15.7px + 2.654vw, 66.66px) * var(--scale));
}

.card__text img {
  width: auto;
  height: 1em;
}