/* ── Fonts ──────────────────────────────────────────────── */

@font-face {
  font-family: "SMAltFont";
  src: local("Caravan Regular"), local("Caravan-Regular"),
       url(/src/fonts/Caravan_old.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Keyframes ──────────────────────────────────────────── */

@keyframes arr-swing {
  0%, to { transform: translateY(3px); }
  50%     { transform: translateY(-3px); }
}

/* ── Custom properties ──────────────────────────────────── */

:root {
  --ink:  #050505;
  --wine: #762024;
  --sand: #c9b8a9;
}

/* ── Base ───────────────────────────────────────────────── */

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

body, html {
  width: 100%;
  height: fit-content;
  margin: 0;
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-weight: 300;
  background: #f7f7f6;
}

::-webkit-scrollbar          { width: 0; height: 0; -webkit-appearance: none; }
::-webkit-scrollbar-thumb    { background: transparent; }
::-webkit-scrollbar-track    { background: transparent; }
html { scrollbar-width: none; }

/* ── Fixed background ───────────────────────────────────── */

.fixed-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

.fixed-bg-video {
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  object-fit: cover;
  opacity: 0.4;
  transform: translateZ(0);
}

/* ── Layout ─────────────────────────────────────────────── */

main.invite-scroll {
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.sheet {
  position: relative;
  width: 1180px;
  margin: 0 auto;
  z-index: 1;
  background: rgb(255 255 255 / 20%);
}

.section {
  position: relative;
  width: 100%;
  overflow: visible;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0.25;
  pointer-events: none;
}

.section > * {
  position: relative;
  z-index: 2;
}

.decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Typography ─────────────────────────────────────────── */

.title {
  margin: 0;
  font-family: "SMHeadersFont", Georgia, serif;
  font-weight: 400;
  line-height: 110%;
  text-align: center;
  letter-spacing: 0;
}

.title-xl { font-size: 100px; }

.title span {
  position: relative;
  display: block;
}

.copy, .script {
  margin: 0;
  text-align: center;
}

.copy {
  font-size: 14px;
  line-height: 1.28;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.script {
  color: var(--wine);
  font-family: "SMAltFont", "SMHeadersFont", cursive;
  font-size: 60px;
  line-height: 0.82;
  letter-spacing: 0;
}

/* ── Components ─────────────────────────────────────────── */

.round-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 30px;
  border: 0.7px solid var(--wine);
  border-radius: 30px;
  color: var(--wine);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.6px;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
  cursor: pointer;
}

.round-btn:hover,
.round-btn:focus-visible {
  color: #fff;
  background: var(--wine);
  outline: none;
}

.oval-photo { overflow: hidden; border-radius: 50%; }

.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  padding-top: 72px;
  text-align: center;
}

.hero .eyebrow {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
}

.hero-mark {
  width: 152px;
  height: 195px;
  margin: 40px auto 36px;
  object-fit: contain;
  object-position: bottom center;
}

.hero h1 {
  width: 484px;
  line-height: 56%;
  margin: 0 auto;
  font-size: 100px;
  white-space: pre-line;
}

.hero .lead {
  width: 260px;
  margin: 80px auto 0;
}

.hero-line,
.hero-ornament {
  display: block;
  margin: 115px auto 0;
}

.hero-line {
  width: 157px;
  height: 1px;
  transform: rotate(90deg);
  background: #000;
}

.hero-ornament {
  width: 62px;
  height: 24px;
  border: solid 0.7px #000;
  border-radius: 50%;
}

.hero-ornament path { animation: arr-swing 1s infinite; }

.decor-one {
  left: 22px;
  top: 515px;
  width: 382px;
  height: 628px;
  transform: rotate(33.24deg);
}

/* ── Intro ──────────────────────────────────────────────── */

.intro {
  padding-top: 78px;
  text-align: center;
}

.intro .title {
  width: 620px;
  margin: 0 auto;
}

.intro .copy {
  width: 360px;
  margin: 28px auto 0;
}

.couple-photo {
  width: 200px;
  height: 304px;
  margin: 40px auto 0;
}

.calendar {
  width: 474px;
  margin: 36px auto 0;
  text-align: center;
}

.calendar h3 {
  font-family: "SMHeadersFont", Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 18px;
}

.intro .said-yes {
  position: absolute;
  right: 170px;
  bottom: 113px;
  width: 380px;
  transform: rotate(-8.27deg);
}

.decor-two {
  right: 20px;
  top: 210px;
  width: 382px;
  height: 628px;
  transform: rotate(149.36deg) scaleY(-1);
}

.decor-three {
  left: 168px;
  top: 635px;
  width: 192px;
  height: 518px;
  transform: rotate(15.3deg);
}

/* ── Place ──────────────────────────────────────────────── */

.place {
  padding: 0 0 70px;
  text-align: center;
}

.place .title {
  width: 620px;
  margin: 0 auto 20px;
}

.place .copy {
  width: 350px;
  margin: 0 auto;
}

.place-photo {
  width: 248px;
  height: 258px;
  margin: 40px auto;
}

/* ── Timing ─────────────────────────────────────────────── */

.timing {
  padding: 60px 0;
  text-align: center;
}

.timing-list {
  display: flex;
  width: 840px;
  margin: 60px auto 0;
  justify-content: center;
  gap: 25px;
}

.time-item {
  width: 180px;
  text-align: center;
  text-transform: uppercase;
}

.time-item strong {
  display: block;
  font-family: "SMHeadersFont", Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
}

.time-item span {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 1.4px;
}

.timing .important-day {
  position: absolute;
  width: 205px;
  transform: rotate(8deg);
  left: 105px;
  top: 40px;
}

.decor-four {
  position: absolute;
  right: 20px;
  top: -346px;
  width: 382px;
  height: 628px;
  transform: rotate(149.36deg) scaleY(-1);
}

/* ── Dress code ─────────────────────────────────────────── */

.dress {
  text-align: center;
  padding: 70px 0;
}

.dress .copy {
  width: 517px;
  margin: 30px auto 0;
}

.sm-dress-code__colors {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 40px auto 0;
}

.sm_colors {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}

.sm_colors > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--ink);
}

.dress-collages {
  position: relative;
  width: 100%;
  height: 630px;
  margin-top: 64px;
}

.dress-group {
  position: absolute;
  top: 0;
  width: 458px;
  height: 620px;
}

.dress-group.ladies  { left: 61px; }
.dress-group.gentlemen { right: 61px; width: 423px; }

.dress-label {
  margin: 0;
  color: var(--wine);
  font-family: "SMAltFont", "SMHeadersFont", cursive;
  font-size: 80px;
  line-height: normal;
  text-align: center;
}

.dress-img {
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
  background: #eee;
}

.dress-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ladies collage – desktop */
.ladies .dress-img:nth-child(1) { left: 0;     top: 156px; width: 146px; height: 241px; }
.ladies .dress-img:nth-child(2) { left: 126px; top: 116px; width: 242px; height: 339px; }
.ladies .dress-img:nth-child(3) { left: 297px; top: 288px; width: 160px; height: 241px; }
.ladies .dress-img:nth-child(4) { left: 65px;  top: 407px; width: 160px; height: 241px; }
.ladies .dress-img:nth-child(5) { left: 332px; top: 80px;  width: 101px; height: 151px; }

/* Gentlemen collage – desktop */
.gentlemen .dress-img:nth-child(1) { left: 277px; top: 80px;  width: 146px; height: 241px; }
.gentlemen .dress-img:nth-child(2) { left: 75px;  top: 122px; width: 242px; height: 339px; }
.gentlemen .dress-img:nth-child(3) { left: 0;     top: 379px; width: 160px; height: 241px; }
.gentlemen .dress-img:nth-child(4) { left: 254px; top: 335px; width: 144px; height: 252px; }
.gentlemen .dress-img:nth-child(5) { left: 9px;   top: 184px; width: 101px; height: 151px; }

/* ── Countdown ──────────────────────────────────────────── */

.countdown {
  padding: 70px 0;
  text-align: center;
}

.countdown .title {
  width: 565px;
  margin: 0 auto 60px;
}

.sm-time__box {
  display: flex;
  justify-content: center;
  gap: 45px;
  text-transform: uppercase;
}

.sm-time__item { text-align: center; }

.sm-timer-time_number { display: inline-block; }

.sm-timer-time_number-span {
  font-family: "SMHeadersFont", Georgia, serif;
  font-size: 48px;
}

.sm-time__item__title {
  font-size: 14px;
  margin: 0;
}

/* ── Wishes ─────────────────────────────────────────────── */

.wishes {
  text-align: center;
  padding: 60px 0;
}

.sm-wishes_slider {
  position: relative;
  padding: 20px 0 40px;
}

.sm-wishes__content-slider {
  width: 370px;
  margin: 0 auto;
  text-transform: uppercase;
  font-size: 14px;
}

.sm-wishes__content-slide { width: 370px; }

#wishes-navigation {
  position: absolute;
  inset: 0;
}

.wishes .sm-arrow-prev {
  position: absolute;
  top: calc(50% - 11px);
  left: calc(50% - 240px);
  transform: rotate(180deg);
  cursor: pointer;
}

.wishes .sm-arrow-next {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% + 195px);
  cursor: pointer;
}

/* ── Contacts ───────────────────────────────────────────── */

.contacts {
  text-align: center;
  padding: 80px 0;
}

.contacts-mark {
  width: 93px;
  height: 119px;
  margin: 40px auto;
  object-fit: contain;
  object-position: bottom center;
}

.contacts .copy {
  width: 402px;
  margin: 0 auto;
}

.organizer {
  margin: 40px auto 0;
  font-family: "SMHeadersFont", Georgia, serif;
  font-size: 48px;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 38px auto 30px;
}

.socials svg { width: 25px; height: 25px; }

.contacts .together {
  position: absolute;
  right: 132px;
  top: 520px;
  width: 285px;
  transform: rotate(-8.27deg);
}

.decor-five {
  left: 22px;
  top: 290px;
  width: 382px;
  height: 628px;
  transform: rotate(33.24deg);
}

/* ── Finale ─────────────────────────────────────────────── */

.finale {
  padding: 60px 0;
  text-align: center;
  overflow-y: clip;
  overflow-x: visible;
}

.finale .copy {
  width: 222px;
  margin: 0 auto 30px;
}

.finale .copy span { display: block; }

.finale .title {
  width: 484px;
  white-space: pre-line;
  line-height: 56%;
  margin: 0 auto 50px;
}

.finale-photo {
  width: 200px;
  height: 304px;
  margin: 28px auto 0;
}

.decor-six {
  right: 20px;
  top: 105px;
  width: 382px;
  height: 628px;
  transform: rotate(149.36deg) scaleY(-1);
}

/* ── Calendar ───────────────────────────────────────────── */

.sm-calendar__box { padding: 1px 8px 24px; }

.sm-calendar {
  display: grid;
  grid-template-columns: repeat(7, auto);
  place-items: center;
  column-gap: 24px;
  row-gap: 18px;
  width: 360px;
  margin: 20px auto 135px;
}

.sm-calendar-day,
.sm-calendar-day-week-title {
  font-size: 15.84px;
  line-height: 100%;
  text-align: center;
}

.sm-calendar-day-week-title {
  font-family: "SMHeadersFont", Georgia, serif;
  color: var(--wine);
  text-transform: uppercase;
  width: 30px;
  height: 22px;
  opacity: 0.6;
}

.sm-calendar-day { color: var(--ink); }

.sm-number-active {
  position: relative;
  color: var(--wine);
}

.sm-number-active::before {
  content: "";
  position: absolute;
  mask-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.285923 6.04766C-0.217124 9.63632 4.68758 14.2717 7.20282 16.1408C9.08925 17.7013 14.4153 8.92977 15.6729 6.12613C16.9306 3.32249 16.0061 1.0011 14.1197 0.440376C12.27 -0.109455 10.2179 0.321854 8.36023 4.56815C8.3203 4.65941 8.18485 4.65338 8.14795 4.56086C5.60669 -1.81078 0.906329 1.62178 0.285923 6.04766Z' stroke='%23762024' stroke-width='0.5'/%3E%3C/svg%3E%0A");
  width: 32px;
  height: 35px;
  background: var(--wine);
  mask-size: 100%;
  mask-repeat: no-repeat;
  top: -8px;
  left: -6px;
}

/* ── Mobile (≤ 499px) ───────────────────────────────────── */

@media (max-width: 499px) {
  .fixed-bg-video {
    inset: -10px -41px;
    width: calc(100% + 82px);
    height: calc(100% + 20px);
    background-image: url(/src/img/bg-mobile-a.webp);
    background-size: 467px 800px;
  }

  .sheet { width: 290px; }

  .title-xl { font-size: 44.938px; line-height: 1; }
  .calendar h3, .time-item strong { font-size: 34px; }
  .copy   { font-size: 8px; letter-spacing: 0.8px; }
  .script { font-size: 40px; }
  .round-btn { min-height: 30px; }

  /* Hero */
  .hero { padding: 30px 0; }
  .hero .eyebrow { font-size: 9px; margin: 0 0 40px; }
  .hero-mark { width: 93px; height: 119px; }
  .hero h1 {
    left: 50%; width: 270px; margin: 25px 0 0;
    font-size: 44.938px; line-height: 50%;
    transform: translateX(-50%);
  }
  .hero .lead {
    left: 50%; width: 157px; margin: 70px 0 0;
    font-size: 8px; letter-spacing: 0.8px;
    transform: translateX(-50%);
  }
  .hero-line   { left: 50%; width: 96px; margin: 96px 0; transform: translateX(-50%) rotate(90deg); }
  .hero-ornament { left: 126px; width: 38px; height: 15px; margin: 0; }
  .decor-one   { left: -80px; top: 368px; width: 193px; height: 317px; transform: rotate(36deg); }

  /* Intro */
  .intro { padding: 50px 0 25px; }
  .intro .title { width: 226px; }
  .intro .copy  { width: 200px; margin-top: 10px; }
  .couple-photo { margin-top: 36px; }
  .calendar     { width: 253px; margin-top: 73px; }
  .calendar h3  { margin-bottom: 10px; }
  .intro .said-yes { left: auto; right: -50px; top: auto; bottom: 218px; width: 211px; letter-spacing: -0.05em; }
  .decor-two  { left: auto; right: -95px; top: 130px; width: 193px; height: 317px; z-index: 10; }
  .decor-three { left: -42px; top: auto; bottom: -5px; width: 93px; height: 261px; }

  /* Place */
  .place { padding: 70px 0; }
  .place .title { width: 226px; }
  .place .copy  { width: 230px; }
  .place-photo  { width: 200px; height: 208px; margin: 28px auto 18px; }

  /* Timing */
  .timing-list { flex-direction: column; width: 290px; gap: 40px; margin-top: 24px; }
  .time-item   { width: 290px; }
  .time-item span { margin-top: 10px; font-size: 8px; letter-spacing: 0.8px; }
  .timing .important-day { left: -25px; top: 100px; width: 125px; letter-spacing: -0.02em; }
  .decor-four { right: -100px; top: 110px; width: 193px; height: 317px; }

  /* Dress */
  .dress .copy { width: 245px; }
  .sm-dress-code__colors { margin-top: 10px; }
  .dress-collages { height: 840px; margin-top: 36px; }
  .dress-group,
  .dress-group.ladies,
  .dress-group.gentlemen { left: 0; right: auto; width: 290px; height: 410px; }
  .dress-group.gentlemen { top: 446px; }
  .dress-label { font-size: 46px; }

  /* Ladies collage – mobile */
  .ladies .dress-img:nth-child(1) { left: 0;        top: 93.93px;  width: 92.37px;   height: 152.519px; }
  .ladies .dress-img:nth-child(2) { left: 79.68px;  top: 68.87px;  width: 153.235px; height: 214.815px; }
  .ladies .dress-img:nth-child(3) { left: 188.32px; top: 177.71px; width: 101.679px; height: 152.519px; }
  .ladies .dress-img:nth-child(4) { left: 41.53px;  top: 253.61px; width: 101.679px; height: 152.519px; }
  .ladies .dress-img:nth-child(5) { left: 210.52px; top: 45.96px;  width: 63.967px;  height: 95.951px;  }

  /* Gentlemen collage – mobile */
  .gentlemen .dress-img:nth-child(1) { left: 189.97px; top: 44.3px;   width: 100.027px; height: 165.16px;  }
  .gentlemen .dress-img:nth-child(2) { left: 54.96px;  top: 72.99px;  width: 165.936px; height: 232.62px;  }
  .gentlemen .dress-img:nth-child(3) { left: 0;        top: 249.78px; width: 110.107px; height: 165.16px;  }
  .gentlemen .dress-img:nth-child(4) { left: 174.47px; top: 219.54px; width: 98.543px;  height: 172.797px; }
  .gentlemen .dress-img:nth-child(5) { left: 6.2px;    top: 115.63px; width: 69.269px;  height: 103.904px; }

  /* Timer */
  .countdown .title { width: 290px; margin-bottom: 30px; }
  .sm-time__box { gap: 36px; }
  .sm-timer-time_number-span { font-size: 34px; }
  .sm-time__item__title { font-size: 8px; }

  /* Wishes */
  .sm-wishes__content-slider,
  .sm-wishes__content-slide { width: 175px; }
  .sm-wishes__content-slide { font-size: 8px; line-height: 125%; }
  .sm-wishes_slider { padding: 0; margin: 20px 0 30px; }
  .wishes .sm-arrow-prev { left: calc(50% - 140px); }
  .wishes .sm-arrow-next { left: calc(50% + 95px); }

  /* Contacts */
  .contacts { padding: 60px 0 140px; }
  .contacts-mark { margin: 30px auto; }
  .contacts .copy { width: 222px; }
  .organizer { margin-top: 10px; font-size: 34px; }
  .socials { margin-top: 25px; margin-bottom: 25px; }
  .contacts .together { left: auto; right: -36px; top: auto; bottom: 50px; width: 170px; letter-spacing: -0.03em; }
  .decor-five { left: -140px; top: auto; bottom: -55px; width: 230px; height: 378px; }

  /* Calendar */
  .sm-calendar__box { padding: 0 12px; }
  .sm-calendar { width: 228px; column-gap: 0; row-gap: 5px; margin-top: 15px; margin-bottom: 0; }
  .sm-calendar-day,
  .sm-calendar-day-week-title { font-size: 11px; line-height: 17px; }
  .sm-number-active::before { width: 26px; height: 26px; top: -5px; left: -6px; }

  /* Finale */
  .finale .title { width: 226px; }
  .finale-photo  { width: 160px; height: 244px; margin-top: 24px; }
  .decor-six { right: -90px; top: auto; bottom: 0; width: 193px; height: 317px; z-index: 10; }
}