@font-face {
    font-family: Darleston;
    src: url('image/Darleston.otf') format('opentype');
    font-display: swap
}

:root {
    font-family: 'Bona Nova', Georgia, serif;
    color: #31251f;
    background: #e9e3d8
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

body {
    min-height: 100dvh;
    display: grid;
    place-items: center
}

.invitation {
    position: relative;
    width: min(100vw, calc(100dvh * 360 / 504.75));
    height: min(100dvh, calc(100vw * 504.75 / 360));
    overflow: hidden;
    background: #faf6ed;
    box-shadow: 0 12px 45px #3d301b26
}

.slides {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain
}

.slides::-webkit-scrollbar {
    display: none
}

.slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-image: var(--background);
    background-size: 100% 100%;
    background-position: center;
    container-type: inline-size;
    text-align: center
}

.slide>* {
    position: absolute;
    margin: 0
}

.script {
    font-family: Darleston, 'Birthstone', cursive;
    font-weight: 400;
    color: #b88929;
    line-height: 1.1
}

.cover-line {
    top: var(--top);
    left: 18%;
    width: 64%;
    color: #b88929;
    font-size: 4.3cqw;
    line-height: 1.35
}

.cover-script {
    top: var(--top);
    left: 16%;
    width: 68%;
    font-size: 9cqw
}

.names {
    top: 5%;
    left: 3%;
    width: 94%;
    font-size: 19cqw;
    line-height: 1.12;
    white-space: nowrap
}

.names span {
    display: block;
    font-size: 5.2cqw;
    margin: 0 0 -.6cqw
}

.invitation-line {
    top: 42%;
    width: 100%;
    font-size: 3.5cqw;
    line-height: 1.3
}

.date {
    top: 56%;
    left: 20%;
    width: 64%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #392b21;
    font-size: 3.7cqw
}

.date strong {
    font-size: 7.2cqw;
    font-weight: 400;
    color: #ae811e;
    padding: 0 3.5cqw;
    line-height: 1.2
}

.venue {
    top: 71%;
    width: 45%;
    font-size: 3cqw;
    line-height: 1.15
}

.venue h2 {
    color: #9e781e;
    font-size: 3cqw;
    margin: 0 0 3.5cqw
}

.venue p {
    margin: 0;
}

.venue address {
    font-style: normal;
    margin: 4.2cqw auto 0;
    max-width: 78%;
    white-space: nowrap;
    font-size: 2.75cqw;

    background-color: #efc265;
    border-radius: 20px;
    padding: 4px 10px;
    width: fit-content;
}

.ceremony {
    left: 4%
}

.reception {
    right: 4%
}

.dress-heading {
    top: 17%;
    left: 4%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #aa7d27;
    font-size: 9.4cqw
}

.dress-label,
.dress-detail {
    font-style: italic;
    font-weight: bold;
    font-size: 4cqw
}

.dress-label {
    top: 17%;
    width: 20%
}

.woman {
    left: 33%
}

.man {
    left: 64%
}

.dress-detail {
    top: 74%;
}

.woman-detail {
    left: 29%;
    width: 28%
}

.man-detail {
    left: 65%;
    width: 18%
}

.dress-note {
    top: 85%;
    left: 18%;
    width: 72%;
    font-style: italic;
    font-weight: 700;
    font-size: 3.25cqw;
    line-height: 1.3
}

.itinerary-heading {
    top: 7%;
    left: 0;
    width: 100%;
    color: #a47616;
    font-size: 10cqw
}

.itinerary-subtitle {
    top: 15%;
    left: 0;
    width: 100%;
    color: #a47616;
    font-size: 3.5cqw
}

.event {
    left: var(--x);
    top: var(--y);
    width: 26%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    white-space: nowrap
}

.event strong {
    font-size: 4cqw;
    color: #b58525
}

.event span {
    font-size: 3cqw
}

.last-event {
    top: 85%;
    left: 56.5%;
    width: 65%;
    flex-direction: row;
    justify-content: center;
    gap: 21cqw
}

.seats-title {
    top: 8%;
    width: 100%;
    font-style: italic;
    color: #af821e;
    font-size: 7.5cqw
}

.seats-count {
    top: 23%;
    left: 0;
    width: 100%;
    font-size: 6.5cqw
}

.adults {
    top: 42%;
    left: 14%;
    width: 72%;
    font-size: 3.25cqw;
    line-height: 1.25;

    background-color: #efc265;
    border-radius: 20px;
    padding: 20px 10px;
}

.gifts {
    top: 59%;
    width: 100%;
    font-style: italic;
    font-weight: 700;
    color: #ad7c23;
    font-size: 7.5cqw
}

.presence {
    top: 17%;
    width: 100%;
    font-size: 4cqw;
    color: #ac7a1e;

}

.confirm-title {
    top: 35%;
    width: 100%;
    font-size: 7.5cqw;
    color: #ac7a1e
}

.confirm-message {
    top: 56%;
    width: 100%;
    font-size: 4.25cqw;
    line-height: 1.3
}

.phone {
    top: 66%;
    left: 32%;
    width: 36%;
    color: #241d19;
    text-decoration: none;
    font-size: 4.5cqw;
    line-height: 1.6;

    background-color: #efc265;
    border-radius: 20px;
    padding: 4px 10px;
}

.phone:focus-visible {
    outline: 2px solid #704e19;
    border-radius: 50%
}

.farewell {
    top: 79%;
    width: 100%;
    font-size: 4cqw;
    color: #ac7a1e
}

blockquote {
    top: 24%;
    left: 7%;
    width: 86%;
    font-family: "Birthstone";
    font-weight: 700;
    color: #a16e14;
    font-size: 8.7cqw;
    line-height: 1.3
}

blockquote cite {
    display: block;
    margin-top: 2cqw;
    font-size: 4cqw
}

.controls {
    position: absolute;
    bottom: max(7px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fffcf4e6;
    border: 1px solid #c5ac75;
    border-radius: 25px;
    padding: 2px 7px;
    color: #61471f;
    box-shadow: 0 2px 12px #30230e28;
    opacity: 1;
    transition: opacity .35s ease;
    z-index: 2
}

.controls.is-hidden {
    opacity: 0;
    pointer-events: none
}

.arrow {
    border: 0;
    background: transparent;
    color: inherit;
    font: 26px Georgia;
    line-height: 30px;
    width: 32px;
    cursor: pointer
}

.arrow:disabled {
    opacity: .3;
    cursor: default
}

.counter {
    font-size: 12px;
    min-width: 34px;
    text-align: center
}

@media(prefers-reduced-motion:reduce) {
    .slides {
        scroll-behavior: auto !important
    }
}

.swipe-hint {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin: 0;
  padding: 7px 14px;
  border-radius: 20px;
  background: #efc265;
  color: #31251f;
  font-size: 3.5cqw;
  pointer-events: none;
}

.swipe-circle {
  position: absolute;
  right: 8%;
  bottom: 2%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #efc265;
  color: #31251f;
  font-size: 27px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.swipe-circle.visible {
  opacity: 1;
  animation: move-right 1.2s ease-in-out infinite;
}

.swipe-circle svg {
  display: block;
  width: 24px;
  height: 24px;
}

@keyframes move-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}