@font-face {
  font-family: "TT Nooks Script";
  src: url("assets/fonts/tt-nooks-script-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* =========================================================
   Andressa & Roger — wedding page
   Mobile-first. Everything is measured in "design px" from the
   768px-wide mockup (page.jpg) and multiplied by --u, so on phones
   the page scales exactly like the mockup, and on larger screens it
   stops growing at --u-max.
   ========================================================= */

:root {
  --u-max: 0.8px;
  --u: min(calc(100vw / 768), var(--u-max));

  --cream: #fefaef;
  --ink: #1a1a18;
  --green: #768024;
  --green-diamond: #7f9034;
  --pink: #f69dbd;
  --pink-ink: #f49dbb;
  --blue: #29488b;
  --orange: #e19214;
  --orange-line: #d4860f;
  --red: #d53221;
  --red-ink: #d33a1f;
  --white: #ffffff;

  /* Placeholder families — replace with the licensed fonts. */
  --font-body: "Inter", system-ui, sans-serif;
  --font-caps: "Montserrat", system-ui, sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-amp: "Fraunces", Georgia, serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(var(--u) * 23.5);
  line-height: 1.6;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, figure, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
u { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* shared section helpers ---------------------------------- */
section { position: relative; }

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 62);
  line-height: 1;
  letter-spacing: -0.01em;
}
.title--xl { font-size: calc(var(--u) * 78); }
.title--light { color: var(--white); }
.title--pink { color: var(--pink-ink); }
.title--dark { color: var(--ink); }

/* ================= HERO ================= */
.hero {
  position: relative;
  width: calc(var(--u) * 768);
  height: calc(var(--u) * 956);
  margin: 0 auto;
  color: var(--ink);
  background: var(--green) url("assets/img/paper-green.jpg") center top / cover;
  border-radius: 0 0 50% 50% / 0 0 calc(var(--u) * 260) calc(var(--u) * 260);
  overflow: hidden;
}

.hero__est,
.hero__date {
  position: absolute;
  left: 0;
  right: 0;
  font-family: var(--font-caps);
  font-weight: 700;
  line-height: 1;
}
.hero__est {
  top: calc(var(--u) * 136);
  font-size: calc(var(--u) * 22);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
}
.hero__date {
  top: calc(var(--u) * 805);
  font-size: calc(var(--u) * 25);
  letter-spacing: 0.16em;
  padding-left: 0.16em;
}

.hero__couple {
  position: absolute;
  left: calc(var(--u) * 175);
  top: calc(var(--u) * 196);
  width: calc(var(--u) * 418);
}

.hero__names {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 440);
  translate: 0 -50%;
  font-family: var(--font-caps);
  font-weight: 300;
  font-size: calc(var(--u) * 45);
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.amp {
  font-family: var(--font-amp);
  font-weight: 900;
  font-size: 1.12em;
  line-height: 0;
  vertical-align: -0.04em;
}

/* ================= STORY ================= */
.story {
  padding-bottom: calc(var(--u) * 112);
}

.polaroid {
  position: relative;
  z-index: 2;
  width: calc(var(--u) * 437);
  margin: calc(var(--u) * -36) auto 0;
  translate: calc(var(--u) * 6) 0;
}
.polaroid img {
  rotate: -6.24deg;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgb(0 0 0 / 0.28));
}

.story__text {
  max-width: calc(var(--u) * 640);
  margin: calc(var(--u) * 50) auto 0;
  padding: 0 calc(var(--u) * 20);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 30);
}
.story__text p + p { margin-top: calc(var(--u) * 30); }

/* ================= EVENTS (pink) ================= */
.events {
  background: var(--pink);
  border-top: calc(var(--u) * 9) solid var(--white);
  padding: calc(var(--u) * 61) calc(var(--u) * 20) calc(var(--u) * 115);
}

.events__diamond {
  position: absolute;
  top: calc(var(--u) * -9);
  left: 50%;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  background: var(--green-diamond);
  translate: -50% -50%;
  rotate: 45deg;
}

.event__art { margin: 0 auto; }
.event__art--church { width: calc(var(--u) * 234); }
.event__art--party { width: calc(var(--u) * 334); margin-top: calc(var(--u) * 30); }

.event .title { margin-top: calc(var(--u) * 19); }

.event__info {
  margin-top: calc(var(--u) * 22);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37);
}

/* ================= DRESS CODE (blue) ================= */
.dress {
  background: var(--blue);
  color: var(--white);
  padding: calc(var(--u) * 125) 0 calc(var(--u) * 130);
}

/* scallops on both edges, bulging outwards: flattened circles, chord 49 / height 15 */
.dress::before,
.dress::after {
  --sc-w: calc(var(--u) * 49);
  --sc-h: calc(var(--u) * 15);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--sc-h);
  background-repeat: repeat-x;
  background-size: var(--sc-w) var(--sc-h);
  background-position: 50% 0;
}
.dress::before {
  bottom: calc(100% - 1px);
  background-image: radial-gradient(circle calc(var(--u) * 27.5) at 50% calc(var(--u) * 27.5), var(--blue) 98%, transparent 100%);
}
.dress::after {
  top: calc(100% - 1px);
  background-image: radial-gradient(circle calc(var(--u) * 27.5) at 50% calc(var(--u) * -12.5), var(--blue) 98%, transparent 100%);
  z-index: 1;
}

.dress__text {
  margin: 0 auto;
  padding: 0 calc(var(--u) * 10);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37.5);
}
.dress__text--intro { max-width: calc(var(--u) * 385); margin-top: calc(var(--u) * 23); }
.dress__text--main  { max-width: calc(var(--u) * 555); margin-top: calc(var(--u) * 37); }
.dress__text--outro { max-width: calc(var(--u) * 560); margin-top: calc(var(--u) * 44); }

.dress__strip {
  width: min(100vw, calc(var(--u) * 1000));
  margin: calc(var(--u) * 30) auto 0;
  overflow: hidden;
}
.dress__strip--men { margin-top: calc(var(--u) * 40); }
.dress__strip img { width: 100%; }

/* ================= WHERE TO STAY (orange paper) ================= */
.stay {
  padding: calc(var(--u) * 131) calc(var(--u) * 20) calc(var(--u) * 182);
  background-color: var(--orange);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--u) * 30),
      var(--orange-line) calc(var(--u) * 30) calc(var(--u) * 33.5),
      transparent calc(var(--u) * 33.5) calc(var(--u) * 35));
  background-size: calc(var(--u) * 180) calc(var(--u) * 180), 100% calc(var(--u) * 35);
}

/* lace border at the bottom */
.stay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--u) * 70 + 1px);
  background: url("assets/img/lace.png") 50% 100% / calc(var(--u) * 92) calc(var(--u) * 70) repeat-x;
}

.stay__art { width: calc(var(--u) * 204); margin: 0 auto; }
.stay .title { margin-top: calc(var(--u) * 32); }

.stay__intro {
  max-width: calc(var(--u) * 510);
  margin: calc(var(--u) * 24) auto 0;
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 38);
}

.hotels {
  list-style: none;
  margin-top: calc(var(--u) * 51);
}
.hotel {
  display: flex;
  flex-direction: column;
  line-height: calc(var(--u) * 39);
}
.hotel strong {
  color: var(--red-ink);
  font-size: calc(var(--u) * 27.5);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.hotel strong a { font: inherit; color: inherit; }
.hotel__phone { font-size: calc(var(--u) * 23); }

/* "—— —— ——" white dashes between hotels */
.hotel + .hotel {
  margin-top: calc(var(--u) * 79);
  position: relative;
}
.hotel + .hotel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -52);
  width: calc(var(--u) * 114);
  height: calc(var(--u) * 2);
  translate: -50% 0;
  background: repeating-linear-gradient(to right, var(--cream) 0 calc(var(--u) * 36), transparent calc(var(--u) * 36) calc(var(--u) * 39));
}

/* ================= GIFT (cream) ================= */
.gift {
  padding: calc(var(--u) * 67) calc(var(--u) * 20) calc(var(--u) * 112);
}
.gift__text {
  max-width: calc(var(--u) * 545);
  margin: 0 auto;
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37.5);
}
.gift__text strong { color: var(--pink-ink); }

.gift__qr {
  width: calc(var(--u) * 344);
  margin: calc(var(--u) * 60) auto 0;
}

.gift__pix {
  margin-top: calc(var(--u) * 45);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37);
}

/* ================= RSVP (red) ================= */
.rsvp {
  background: var(--red);
  color: var(--cream);
  padding-top: calc(var(--u) * 105);
}
.rsvp::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: calc(var(--u) * 15);
  background: radial-gradient(circle calc(var(--u) * 27.5) at 50% calc(var(--u) * 27.5), var(--red) 98%, transparent 100%) 50% 0 / calc(var(--u) * 49) calc(var(--u) * 15) repeat-x;
}

.rsvp__art { width: calc(var(--u) * 289); margin: 0 auto; }

.rsvp__title {
  margin-top: calc(var(--u) * 40);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 81);
  line-height: calc(var(--u) * 67);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.rsvp__title span { display: block; }

.rsvp__text {
  margin-top: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 20);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37);
}

/* green arch */
.closing {
  position: relative;
  width: calc(var(--u) * 768);
  margin: calc(var(--u) * 65) auto 0;
  padding: calc(var(--u) * 117) calc(var(--u) * 20) calc(var(--u) * 86);
  background: var(--green) url("assets/img/paper-green.jpg") center bottom / cover;
  border-radius: 50% 50% 0 0 / calc(var(--u) * 352) calc(var(--u) * 352) 0 0;
  color: var(--cream);
}

.whatsapp {
  display: block;
  width: calc(var(--u) * 118);
  height: calc(var(--u) * 118);
  margin: 0 auto;
  color: var(--pink-ink);
}
.whatsapp svg { display: block; width: 100%; height: 100%; }

.closing__text {
  max-width: calc(var(--u) * 440);
  margin: calc(var(--u) * 90) auto 0;
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37);
}
.closing__sign {
  margin-top: calc(var(--u) * 74);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 37);
}
.closing__monogram {
  width: calc(var(--u) * 354);
  margin: calc(var(--u) * 65) auto 0;
}

/* Gentle scroll reveals; individual translate preserves layout transforms. */
section { overflow-x: clip; }
[data-slide] {
  transition: opacity 850ms ease, translate 850ms cubic-bezier(.22, 1, .36, 1);
}
.reveal-pending { opacity: 0; translate: 0 20px; }
.is-revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-slide] { transition: none; }
  .reveal-pending { opacity: 1; translate: none; }
}

.events .title, .dress .title, .stay .title, .rsvp__title {
  font-family: "TT Nooks Script", "Times New Roman", serif;
  font-weight: 400;
}

.events .title, .dress .title, .stay .title, .rsvp__title { letter-spacing: -0.039em; }

.hero__names { left: 50%; right: auto; width: calc(var(--u) * 537.6); transform: translateX(-50%); }
.hero__names img { width: 100%; height: auto; }

.hero { background: transparent url("assets/img/fundo.png") center / 100% 100% no-repeat; border-radius: 0; }
.closing { background: none; border-radius: 0; isolation: isolate; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/fundo.png") center / 100% 100% no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

.closing { min-height: calc(var(--u) * 1010.88); }
.closing::before {
  background-image: url("assets/img/fundo-final-v2.png");
  background-size: 100% 100%;
  transform: rotate(180deg);
}

/* Copy the Pix key without leaving the page. */
.pix-copy {
  display: inline-block;
  margin: 8px 6px;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pix-copy:hover { filter: brightness(.92); }
.pix-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pix-copy-status { display: block; font-size: 14px; line-height: 1.4; }
.pix-copy-status:empty { display: none; }

.gift-list-link {display:inline-block;margin-top:24px;padding:12px 22px;background:var(--green);color:var(--cream);border-radius:999px;font-size:16px;min-height:44px;}
.gift-list-link:focus-visible {outline:2px solid var(--ink);outline-offset:4px;}

/* Keep every full-length menswear reference inside the section. */
.dress__strip--men {width:100%;max-width:calc(var(--u) * 768);overflow:visible;}
.dress__strip--men img {width:100%;height:auto;object-fit:contain;}