/* Copy of the Canva design: a 360-unit-wide canvas, every position measured on the published Canva page. */
@font-face { font-family: "Glacial Indifference"; src: url(fonts/GlacialIndifference-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Glacial Indifference"; src: url(fonts/GlacialIndifference-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --wine: #691a2c;
  --cream: #f4f0e7;
  --title: "Prata", Georgia, serif;
  --body: "Glacial Indifference", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #dadbe0; }
img { display: block; }
p, h1, h2, h3 { margin: 0; font-weight: 400; }

.card {
  width: min(100vw, 400px); margin: 0 auto; container-type: inline-size;
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 50px rgba(70, 70, 120, .25);
}
@media (min-width: 440px) { .card { margin: 32px auto; } }
.canvas { --u: calc(100cqw / 360); position: relative; height: calc(1241 * var(--u)); }
.canvas section, .canvas header, .canvas footer { position: absolute; left: 0; width: 100%; overflow: hidden; }
.canvas img { position: absolute; object-fit: cover; }

/* Portada: 0–442 */
.hero { top: 0; height: calc(442 * var(--u)); color: var(--cream); }
.hero > img { inset: 0; width: 100%; height: 100%; }
.date { position: absolute; inset: 0; font: calc(132 * var(--u)) / 1 "Poiret One", serif; }
.d { position: absolute; }
.d1 { left: calc(-68 * var(--u)); top: calc(25.8 * var(--u)); }
.d2 { left: calc(33.3 * var(--u)); top: calc(25.8 * var(--u)); }
.d3 { left: calc(-66 * var(--u)); top: calc(130 * var(--u)); }
.d4 { left: calc(35.1 * var(--u)); top: calc(130 * var(--u)); }
.d5 { left: calc(-32.1 * var(--u)); top: calc(230.2 * var(--u)); }
.d6 { left: calc(54.4 * var(--u)); top: calc(230.2 * var(--u)); }
.hero h1 {
  position: absolute; left: calc(201 * var(--u)); top: calc(365 * var(--u)); width: calc(115 * var(--u));
  font: calc(16.43 * var(--u)) / calc(24 * var(--u)) var(--title); text-align: center; white-space: nowrap;
}

/* Història: 442–644 */
.story { top: calc(442 * var(--u)); height: calc(202 * var(--u)); background: #fff; color: var(--wine); }
.story-a { left: calc(36 * var(--u)); top: calc(28 * var(--u)); width: calc(105 * var(--u)); height: calc(157 * var(--u)); }
.story-b { left: calc(160 * var(--u)); top: calc(103 * var(--u)); width: calc(164 * var(--u)); height: calc(81 * var(--u)); }
.story h2 {
  position: absolute; left: calc(62 * var(--u)); top: calc(13 * var(--u)); width: calc(262 * var(--u));
  font: calc(19.15 * var(--u)) / calc(28 * var(--u)) var(--title); letter-spacing: calc(2.16 * var(--u));
  text-align: center; white-space: nowrap;
}
.story-quote {
  position: absolute; right: calc(36 * var(--u)); top: calc(74 * var(--u));
  font: calc(7.06 * var(--u)) / calc(8.6 * var(--u)) var(--body); letter-spacing: calc(.8 * var(--u));
  text-align: right; white-space: nowrap;
}

/* RSVP: 644–822 */
.rsvp { top: calc(644 * var(--u)); height: calc(178 * var(--u)); background: #252525; color: var(--cream); text-align: center; }
.rsvp > img { inset: 0; width: 100%; height: 100%; opacity: .54; }
.rsvp h2 {
  position: absolute; left: calc(143 * var(--u)); top: calc(22 * var(--u)); width: calc(76 * var(--u));
  font: calc(23.68 * var(--u)) / calc(34 * var(--u)) var(--title); letter-spacing: calc(2.67 * var(--u)); white-space: nowrap;
}
.btn {
  position: absolute; left: calc(145.3 * var(--u)); top: calc(56.7 * var(--u)); width: calc(74.3 * var(--u)); height: calc(20.3 * var(--u));
  display: grid; place-items: center; background: var(--cream); border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(1.5 * var(--u)) 0 #c9c2b4;
  color: #6f6a6a; font: 700 calc(8.93 * var(--u)) / 1 var(--body); letter-spacing: calc(1 * var(--u));
}
.countdown { position: absolute; left: calc(86 * var(--u)); top: calc(106 * var(--u)); width: calc(189 * var(--u)); font-family: "Times New Roman", Times, serif; }
.countdown p { font-weight: 700; font-size: calc(8 * var(--u)); }
.digits { display: flex; justify-content: center; align-items: flex-start; gap: calc(1 * var(--u)); margin-left: calc(-12 * var(--u)); width: calc(213 * var(--u)); }
.digits div { display: flex; flex-direction: column; align-items: center; min-width: calc(38 * var(--u)); }
.digits b, .digits i { font: 400 calc(25 * var(--u)) / 1.05 "Times New Roman", Times, serif; font-style: normal; }
.digits span { font-size: calc(5 * var(--u)); color: #d9d6d0; }

/* Preguntes freqüents: 822–1031 */
.faq { top: calc(822 * var(--u)); height: calc(209 * var(--u)); background: #fff; color: var(--wine); --top: 822; }
.faq h2 {
  position: absolute; left: calc(35 * var(--u)); top: calc(11 * var(--u)); width: calc(291 * var(--u));
  font: calc(18.5 * var(--u)) / calc(27 * var(--u)) var(--title); letter-spacing: calc(2.1 * var(--u));
  text-align: center; white-space: nowrap;
}
.faq h3, .faq p, .faq hr { position: absolute; left: calc(41 * var(--u)); width: calc(286 * var(--u)); top: calc((var(--y) - var(--top)) * var(--u)); }
.faq h3 { font: 700 calc(7.06 * var(--u)) / 1 var(--body); letter-spacing: calc(.8 * var(--u)); }
.faq p { font: calc(7.06 * var(--u)) / 1 var(--body); letter-spacing: calc(.8 * var(--u)); text-align: justify; }
.faq hr { margin: 0; border: 0; border-top: 1px solid #f6f3ec; }
.faq .faq-contact {
  left: calc(84 * var(--u)); width: calc(193 * var(--u)); top: calc(187 * var(--u));
  font: calc(7.41 * var(--u)) / calc(10 * var(--u)) var(--title); letter-spacing: calc(.9 * var(--u));
  text-align: center; white-space: nowrap;
}

/* Final: 1031–1241 */
.end { top: calc(1031 * var(--u)); height: calc(210 * var(--u)); background: #1e1e1e; color: var(--cream); }
.end > img:first-child { inset: 0; width: 100%; height: 100%; opacity: .58; }
.end .mono { left: calc(92.3 * var(--u)); top: calc(71.3 * var(--u)); width: calc(35.7 * var(--u)); height: auto; }
.thanks {
  position: absolute; left: calc(36 * var(--u)); top: calc(116 * var(--u));
  font: calc(11.59 * var(--u)) / calc(10.5 * var(--u)) var(--title); white-space: nowrap;
}