/* =========================================
   ПЕРЕМЕННЫЕ
========================================= */

:root {
  --white: #ffffff;
  --black: #171717;
  --cream: #f4f1eb;
  --paper: #faf9f6;
  --muted: #77736e;
  --accent: #7f211c;
  --ampersand: #b18a62;
  --dark: #0f241c;
  --success: #41634d;

  --line: rgba(20, 20, 20, 0.18);

  --serif:
    "Bodoni Moda",
    "Times New Roman",
    serif;

  --sans:
    "Manrope",
    Arial,
    sans-serif;
}


/* =========================================
   RESET
========================================= */

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


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    var(--cream);

  color:
    var(--black);

  font-family:
    var(--sans);

  font-weight:
    300;

  overflow-x:
    hidden;
}


body,
button,
input,
textarea,
select {
  font-family:
    var(--sans);
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


button {
  border: 0;
}


img {
  display: block;

  max-width: 100%;
}


[hidden],
.is-hidden {
  display: none !important;
}


/* =========================================
   HERO
========================================= */

.hero {
  position: relative;

  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    var(--dark);
}


.hero__image {
  position:
    absolute;

  inset: 0;

  z-index:
    -3;

  background-position:
    center center;

  background-repeat:
    no-repeat;

  background-size:
    cover;
}


.hero__overlay {
  position:
    absolute;

  inset: 0;

  z-index:
    -2;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.04) 45%,
      rgba(0, 0, 0, 0.28) 100%
    );
}


/* =========================================
   КАРТОЧКА
========================================= */

.invitation-card {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      455px,
      calc(100vw - 30px)
    );

  min-height:
    395px;

  padding:
    27px 25px 18px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.55
    );

  box-shadow:
    0 25px 70px
      rgba(0, 0, 0, 0.24),
    0 8px 30px
      rgba(0, 0, 0, 0.08);

  animation:
    cardAppear
    1.2s
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    )
    both;
}


.invitation-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    9px;

  border:
    1px solid
    rgba(
      127,
      33,
      28,
      0.12
    );

  pointer-events:
    none;
}


/* =========================================
   ВЕРХ КАРТОЧКИ
========================================= */

.invitation-card__top {
  position:
    relative;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;

  padding:
    0 5px;
}


.names-wrapper {
  min-width:
    0;
}


.names {
  margin: 0;

  color:
    var(--accent);

  font-family:
    var(--serif);

  font-size:
    clamp(
      36px,
      4vw,
      50px
    );

  font-weight:
    400;

  line-height:
    .88;

  letter-spacing:
    -1.8px;

  text-transform:
    uppercase;
}


.names > #firstName,
.names__second {
  display:
    block;
}


.names__amp {
  display:
    block;

  margin:
    5px 0 4px;

  color:
    var(--ampersand);

  font-family:
    var(--serif);

  font-size:
    .55em;

  font-weight:
    400;

  line-height:
    .8;

  letter-spacing:
    0;

  text-transform:
    none;
}


.names__second {
  font-size:
    .91em;
}


/* =========================================
   ДАТА
========================================= */

.date {
  flex:
    0 0 auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding-top:
    2px;

  color:
    #babac5;

  font-family:
    var(--serif);

  font-size:
    22px;

  line-height:
    1.28;
}


/* =========================================
   ЦИТАТА
========================================= */

.invitation-card__middle {
  margin-top:
    27px;
}


.quote {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  font-family:
    var(--serif);

  font-size:
    14px;

  font-style:
    italic;

  line-height:
    1.65;
}


/* =========================================
   НИЗ КАРТОЧКИ
========================================= */

.invitation-card__bottom {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;

  margin-top:
    15px;
}


/* =========================================
   МУЗЫКА
========================================= */

.music-hint {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  padding-bottom:
    2px;
}


.music-hint p {
  max-width:
    190px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  font-size:
    9px;

  line-height:
    1.45;
}


/*
  ВАЖНО:

  visibility:hidden скрывает блок,
  но сохраняет его ширину и высоту.

  Именно поэтому фотография справа
  НЕ перемещается.
*/

.music-hint.music-disabled {
  visibility:
    hidden;

  pointer-events:
    none;
}


.music-button {
  position:
    relative;

  flex:
    0 0 auto;

  width:
    30px;

  height:
    30px;

  padding: 0;

  border-radius:
    50%;

  background:
    #080808;

  cursor:
    pointer;

  transition:
    transform
      .25s ease,
    background
      .25s ease;
}


.music-button:hover {
  transform:
    scale(1.08);
}


.music-button__play {
  position:
    absolute;

  left:
    11px;

  top:
    8px;

  width: 0;

  height: 0;

  border-top:
    7px solid
    transparent;

  border-bottom:
    7px solid
    transparent;

  border-left:
    10px solid
    var(--white);
}


.music-button.is-playing
.music-button__play {
  left:
    10px;

  top:
    9px;

  width:
    10px;

  height:
    12px;

  border:
    0;

  border-left:
    3px solid
    var(--white);

  border-right:
    3px solid
    var(--white);
}


/* =========================================
   ФОТО ПАРЫ
========================================= */

.couple-photo {
  position:
    relative;

  flex:
    0 0 166px;

  width:
    166px;

  height:
    191px;

  overflow:
    hidden;

  background:
    #dddddd;
}


.couple-photo img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================
   SCROLL
========================================= */

.scroll-indicator {
  position:
    absolute;

  left:
    50%;

  bottom:
    23px;

  z-index:
    3;

  width:
    22px;

  height:
    35px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .7
    );

  border-radius:
    15px;
}


.scroll-indicator span {
  position:
    absolute;

  left:
    50%;

  top:
    7px;

  width:
    2px;

  height:
    7px;

  background:
    var(--white);

  transform:
    translateX(-50%);

  animation:
    scrollDot
    1.5s
    ease-in-out
    infinite;
}


/* =========================================
   SECTIONS
========================================= */

.section {
  position:
    relative;

  padding:
    125px 24px;
}


.section__inner {
  width:
    min(
      850px,
      100%
    );

  margin:
    0 auto;

  text-align:
    center;
}


.section__inner--narrow {
  width:
    min(
      700px,
      100%
    );
}


.section--light {
  background:
    var(--paper);
}


.section--cream {
  background:
    var(--cream);
}


.section--dark {
  background:
    var(--dark);

  color:
    var(--white);
}


/* =========================================
   PHOTO SECTION
========================================= */

.section--photo {
  min-height:
    570px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--white);

  background-color:
    var(--dark);

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    cover;
}


/* =========================================
   TYPOGRAPHY
========================================= */

.eyebrow {
  margin:
    0 0 18px;

  color:
    var(--accent);

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;
}


.eyebrow--light {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


.section h2,
.light-title {
  margin: 0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      44px,
      7vw,
      78px
    );

  font-weight:
    400;

  line-height:
    .94;

  letter-spacing:
    -2px;
}


.light-title {
  color:
    var(--white);
}


.thin-line {
  width:
    45px;

  height:
    1px;

  margin:
    35px auto;

  background:
    var(--accent);
}


.text {
  width:
    min(
      480px,
      100%
    );

  margin:
    32px auto 0;

  color:
    #5f5b56;

  font-size:
    14px;

  line-height:
    1.85;
}


.text--light {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


/* =========================================
   BIG DATE
========================================= */

.big-date {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    22px;

  margin-top:
    55px;

  color:
    var(--accent);

  font-family:
    var(--serif);

  font-size:
    clamp(
      45px,
      8vw,
      78px
    );
}


.big-date b {
  color:
    #aaaaaa;

  font-size:
    25px;

  font-weight:
    300;
}


/* =========================================
   COUNTDOWN
========================================= */

.countdown {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;

  margin-top:
    55px;
}


.countdown__item {
  padding:
    20px 10px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .45
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .45
    );
}


.countdown strong {
  display:
    block;

  font-family:
    var(--serif);

  font-size:
    clamp(
      38px,
      5vw,
      62px
    );

  font-weight:
    400;
}


.countdown span {
  display:
    block;

  margin-top:
    3px;

  font-size:
    9px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  opacity:
    .7;
}


/* =========================================
   TIMELINE
========================================= */

.timeline {
  width:
    min(
      680px,
      100%
    );

  margin:
    65px auto 0;

  text-align:
    left;
}


.timeline__item {
  display:
    grid;

  grid-template-columns:
    100px 1fr;

  gap:
    25px;

  padding:
    28px 0;

  border-bottom:
    1px solid
    var(--line);
}


.timeline__item:first-child {
  border-top:
    1px solid
    var(--line);
}


.timeline time {
  color:
    var(--accent);

  font-family:
    var(--serif);

  font-size:
    25px;
}


.timeline h3 {
  margin:
    0 0 8px;

  font-family:
    var(--serif);

  font-size:
    25px;

  font-weight:
    400;
}


.timeline p {
  margin: 0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.65;
}


/* =========================================
   LOCATION
========================================= */

.location-name {
  margin:
    45px 0 8px;

  font-family:
    var(--serif);

  font-size:
    31px;
}


.location-address {
  margin:
    0 auto 35px;

  color:
    var(--muted);

  font-size:
    13px;
}


/* =========================================
   BUTTONS
========================================= */

.outline-button,
.submit-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    48px;

  padding:
    0 30px;

  border:
    1px solid
    var(--black);

  background:
    transparent;

  color:
    var(--black);

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    .13em;

  text-decoration:
    none;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    background
      .25s ease,
    color
      .25s ease,
    transform
      .25s ease,
    opacity
      .25s ease;
}


.outline-button:hover,
.submit-button:hover {
  background:
    var(--black);

  color:
    var(--white);
}


/* =========================================
   DRESS CODE
========================================= */

.dress-colors {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  margin-top:
    50px;

  padding-left:
    9px;
}


.dress-colors span {
  width:
    58px;

  height:
    58px;

  margin-left:
    -9px;

  border:
    4px solid
    var(--dark);

  border-radius:
    50%;
}


/* =========================================
   RSVP
========================================= */

.form-wrapper {
  width:
    min(
      600px,
      100%
    );
}


.rsvp-form {
  display:
    grid;

  gap:
    34px;

  margin-top:
    50px;

  text-align:
    left;
}


/* =========================================
   FORM FIELD
========================================= */

.form-field {
  display:
    grid;

  gap:
    9px;
}


.form-field > span,
.rsvp-fieldset legend {
  display:
    block;

  padding:
    0;

  color:
    #57534f;

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.form-field input,
.form-field textarea {
  width:
    100%;

  padding:
    14px 0;

  border:
    0;

  border-bottom:
    1px solid
    rgba(
      48,
      43,
      40,
      .28
    );

  border-radius:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(--black);

  font-size:
    13px;

  font-weight:
    300;

  transition:
    border-color
      .25s ease,
    background
      .25s ease;
}


.form-field input {
  height:
    50px;
}


.form-field textarea {
  min-height:
    110px;

  line-height:
    1.6;

  resize:
    vertical;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
  color:
    rgba(
      48,
      43,
      40,
      .42
    );
}


.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color:
    var(--accent);

  background:
    rgba(
      255,
      255,
      255,
      .22
    );
}


/* =========================================
   FIELDSET
========================================= */

.rsvp-fieldset {
  min-width:
    0;

  margin:
    0;

  padding:
    0;

  border:
    0;
}


.rsvp-fieldset legend {
  margin-bottom:
    14px;
}


/* =========================================
   RADIO / CHECKBOX
========================================= */

.radio-list,
.checkbox-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.choice {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-height:
    54px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(
      48,
      43,
      40,
      .13
    );

  background:
    rgba(
      255,
      255,
      255,
      .28
    );

  cursor:
    pointer;

  transition:
    background
      .25s ease,
    border-color
      .25s ease,
    transform
      .25s ease;
}


.choice:hover {
  background:
    rgba(
      255,
      255,
      255,
      .55
    );

  border-color:
    rgba(
      48,
      43,
      40,
      .28
    );

  transform:
    translateX(3px);
}


.choice input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.choice span {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  padding-left:
    34px;

  color:
    var(--black);

  font-size:
    12px;

  line-height:
    1.4;
}


.choice span::before {
  content:
    "";

  position:
    absolute;

  left: 0;

  top:
    50%;

  width:
    17px;

  height:
    17px;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(
      48,
      43,
      40,
      .35
    );

  background:
    transparent;

  transition:
    background
      .2s ease,
    border-color
      .2s ease,
    box-shadow
      .2s ease;
}


.radio-list
.choice
span::before {
  border-radius:
    50%;
}


.checkbox-list
.choice
span::before {
  border-radius:
    2px;
}


.radio-list
.choice
input:checked
+ span::before {
  border-color:
    var(--accent);

  background:
    var(--accent);

  box-shadow:
    inset
    0 0 0 4px
    var(--paper);
}


.checkbox-list
.choice
input:checked
+ span::before {
  border-color:
    var(--accent);

  background:
    var(--accent);
}


.checkbox-list
.choice
input:checked
+ span::after {
  content:
    "";

  position:
    absolute;

  left:
    5px;

  top:
    50%;

  width:
    6px;

  height:
    10px;

  border-right:
    1.5px solid
    var(--paper);

  border-bottom:
    1.5px solid
    var(--paper);

  transform:
    translateY(-65%)
    rotate(45deg);
}


.choice
input:focus-visible
+ span::before {
  outline:
    2px solid
    rgba(
      127,
      33,
      28,
      .35
    );

  outline-offset:
    3px;
}


/* =========================================
   RSVP BUTTON
========================================= */

.rsvp-form
.submit-button {
  width:
    100%;

  min-height:
    54px;

  margin-top:
    4px;

  background:
    var(--black);

  color:
    var(--paper);

  font-size:
    10px;

  letter-spacing:
    .16em;
}


.rsvp-form
.submit-button:hover {
  background:
    transparent;

  color:
    var(--black);

  transform:
    translateY(-2px);
}


.rsvp-form
.submit-button:active {
  transform:
    translateY(0);
}


.rsvp-form
.submit-button:disabled {
  opacity:
    .55;

  cursor:
    wait;

  transform:
    none;
}


/* =========================================
   DEADLINE
========================================= */

.rsvp-deadline {
  margin:
    24px 0 0;

  color:
    var(--accent);

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    .08em;
}


/* =========================================
   FORM MESSAGE
========================================= */

.form-message {
  min-height:
    24px;

  margin:
    -12px 0 0;

  color:
    var(--accent);

  text-align:
    center;

  font-size:
    11px;

  line-height:
    1.6;
}


.form-message.is-success {
  color:
    var(--success);
}


.form-message.is-error {
  color:
    var(--accent);
}


/* =========================================
   HONEYPOT
========================================= */

.honeypot {
  position:
    absolute !important;

  left:
    -9999px !important;

  width:
    1px !important;

  height:
    1px !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/* =========================================
   FOOTER
========================================= */

.footer {
  padding:
    55px 20px 45px;

  background:
    var(--dark);

  color:
    var(--white);

  text-align:
    center;
}


.footer__names {
  margin:
    0 0 8px;

  font-family:
    var(--serif);

  font-size:
    28px;
}


.footer__date {
  display:
    block;

  font-size:
    9px;

  letter-spacing:
    .18em;

  opacity:
    .55;
}


/* =========================================
   ЛОГОТИП AACREATE
========================================= */

.creator-credit {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    35px;
}


.creator-credit__label {
  color:
    rgba(
      255,
      255,
      255,
      .55
    );

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.creator-credit__link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px 14px;

  border-radius:
    12px;

  /* background:
    var(--white); */

  text-decoration:
    none;

  transition:
    transform
      .25s ease,
    opacity
      .25s ease,
    box-shadow
      .25s ease;
}


.creator-credit__link:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 25px
    rgba(
      0,
      0,
      0,
      .2
    );
}


.creator-credit__logo {
  width:
    150px;

  max-width:
    42vw;

  height:
    auto;

  object-fit:
    contain;
}


/* =========================================
   REVEAL
========================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(35px);

  transition:
    opacity
      .8s ease,
    transform
      .8s ease;
}


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


.timeline__item:nth-child(1) {
  transition-delay:
    .05s;
}


.timeline__item:nth-child(2) {
  transition-delay:
    .12s;
}


.timeline__item:nth-child(3) {
  transition-delay:
    .19s;
}


.timeline__item:nth-child(4) {
  transition-delay:
    .26s;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes cardAppear {

  from {

    opacity:
      0;

    transform:
      translateY(30px)
      scale(.97);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes scrollDot {

  0%,
  100% {

    transform:
      translate(-50%, 0);

    opacity:
      .4;

  }

  50% {

    transform:
      translate(-50%, 8px);

    opacity:
      1;

  }

}


/* =========================================
   TABLET / MOBILE
========================================= */

@media (
  max-width: 700px
) {

  .hero {
    padding:
      30px 0 65px;
  }


  .invitation-card {
    width:
      min(
        410px,
        calc(
          100vw - 30px
        )
      );

    min-height:
      360px;

    padding:
      22px 18px 15px;
  }


  .invitation-card::after {
    inset:
      7px;
  }


  .invitation-card__top {
    gap:
      12px;
  }


  .names {
    font-size:
      clamp(
        31px,
        9vw,
        43px
      );

    letter-spacing:
      -1.2px;
  }


  .date {
    font-size:
      19px;
  }


  .quote {
    font-size:
      12px;
  }


  .invitation-card__bottom {
    gap:
      12px;
  }


  .couple-photo {
    flex-basis:
      125px;

    width:
      125px;

    height:
      150px;
  }


  .music-hint {
    gap:
      8px;
  }


  .music-hint p {
    font-size:
      8px;
  }


  .section {
    padding:
      90px 20px;
  }


  .section h2,
  .light-title {
    font-size:
      clamp(
        42px,
        14vw,
        65px
      );
  }


  .countdown {
    gap:
      5px;
  }


  .countdown__item {
    padding:
      14px 4px;
  }


  .countdown strong {
    font-size:
      34px;
  }


  .countdown span {
    font-size:
      7px;
  }


  .timeline__item {
    grid-template-columns:
      70px 1fr;

    gap:
      15px;
  }


  .timeline h3 {
    font-size:
      22px;
  }


  .big-date {
    gap:
      12px;
  }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (
  max-width: 430px
) {

  .hero {
    padding:
      20px 0 60px;
  }


  .invitation-card {
    width:
      calc(
        100vw - 24px
      );

    min-height:
      340px;

    padding:
      20px 15px 14px;
  }


  .invitation-card__top {
    padding:
      0 2px;
  }


  .names {
    font-size:
      clamp(
        28px,
        10vw,
        38px
      );

    letter-spacing:
      -1px;
  }


  .names__amp {
    font-size:
      .52em;
  }


  .date {
    font-size:
      17px;
  }


  .invitation-card__middle {
    margin-top:
      20px;
  }


  .quote {
    font-size:
      11px;

    line-height:
      1.55;
  }


  .invitation-card__bottom {
    align-items:
      flex-end;

    margin-top:
      12px;
  }


  .couple-photo {
    flex-basis:
      108px;

    width:
      108px;

    height:
      130px;
  }


  .music-hint {
    max-width:
      calc(
        100% - 120px
      );
  }


  .music-hint p {
    max-width:
      125px;

    font-size:
      7.5px;
  }


  .music-button {
    width:
      28px;

    height:
      28px;
  }


  .music-button__play {
    left:
      10px;

    top:
      7px;
  }


  .section {
    padding:
      75px 18px;
  }


  .section h2,
  .light-title {
    letter-spacing:
      -1.4px;
  }


  .timeline__item {
    grid-template-columns:
      60px
      minmax(
        0,
        1fr
      );

    gap:
      12px;

    padding:
      23px 0;
  }


  .timeline time {
    font-size:
      21px;
  }


  .timeline h3 {
    font-size:
      20px;
  }


  .timeline p {
    font-size:
      11px;
  }


  .big-date {
    gap:
      8px;

    font-size:
      clamp(
        40px,
        14vw,
        60px
      );
  }


  .big-date b {
    font-size:
      19px;
  }


  .dress-colors span {
    width:
      48px;

    height:
      48px;
  }


  .rsvp-form {
    gap:
      28px;
  }


  .form-field input {
    height:
      48px;
  }


  .choice {
    min-height:
      51px;

    padding:
      0 14px;
  }


  .choice span {
    padding-left:
      31px;

    font-size:
      11px;
  }


  .form-field textarea {
    min-height:
      95px;
  }


  .creator-credit__logo {
    width:
      135px;
  }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (
  max-width: 360px
) {

  .invitation-card {
    width:
      calc(
        100vw - 18px
      );

    padding:
      18px 12px 12px;
  }


  .names {
    font-size:
      27px;
  }


  .date {
    font-size:
      15px;
  }


  .quote {
    font-size:
      10px;
  }


  .couple-photo {
    flex-basis:
      94px;

    width:
      94px;

    height:
      116px;
  }


  .music-hint {
    max-width:
      calc(
        100% - 104px
      );
  }


  .music-hint p {
    font-size:
      7px;
  }


  .countdown strong {
    font-size:
      28px;
  }


  .countdown span {
    font-size:
      6px;
  }


  .timeline__item {
    grid-template-columns:
      55px
      minmax(
        0,
        1fr
      );

    gap:
      10px;
  }


  .timeline time {
    font-size:
      19px;
  }


  .timeline h3 {
    font-size:
      18px;
  }


  .timeline p {
    font-size:
      10px;
  }


  .dress-colors span {
    width:
      43px;

    height:
      43px;

    border-width:
      3px;
  }

}


/* =========================================
   SHORT DESKTOP
========================================= */

@media (
  max-height: 700px
)
and (
  min-width: 701px
) {

  .hero {
    padding:
      20px 0 50px;
  }


  .invitation-card {
    transform:
      scale(.88);
  }


  .scroll-indicator {
    bottom:
      10px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion: reduce
) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .reveal {
    opacity:
      1;

    transform:
      none;
  }

}