:root {
  --pink: #F3C6C8;
  --dusty-pink: #E8B7BE;
  --cream: #FFF8F0;
  --cream-soft: #FFF7F2;
  --milk: #FFFDFB;
  --beige: #DFCDBB;
  --gold: #D2B27F;
  --text: #4A3B43;
  --muted: #77686F;
  --line: rgba(74, 59, 67, 0.11);

  --shadow:
    0 28px 80px
    rgba(74, 59, 67, 0.12);

  --shadow-soft:
    0 18px 48px
    rgba(74, 59, 67, 0.08);

  --container:
    min(
      1180px,
      calc(100% - 48px)
    );

  --display:
    "Cormorant Garamond",
    Georgia,
    serif;

  --ui:
    "Montserrat",
    Arial,
    sans-serif;

  --ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  background: var(--cream);
}


body {
  margin: 0;

  min-width: 320px;

  overflow-x: hidden;

  background:
    var(--cream);

  color:
    var(--text);

  font-family:
    var(--display);

  font-size:
    1.1rem;

  line-height:
    1.65;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


body.is-locked {
  overflow: hidden;
}


img {
  display: block;
  max-width: 100%;
}


button,
input,
select,
textarea {
  font: inherit;
}


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


button {
  cursor: pointer;
}


a {
  color: inherit;
  text-decoration: none;
}


[hidden] {
  display: none !important;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:
    3px solid
    rgba(210, 178, 127, 0.36);

  outline-offset:
    4px;
}


::selection {
  background:
    var(--pink);

  color:
    var(--text);
}


.container {
  width:
    var(--container);

  margin-inline:
    auto;
}


/* =========================================================
   ИНДИКАТОР ПРОКРУТКИ
   ========================================================= */

.page-progress {
  position: fixed;

  z-index: 5000;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  pointer-events: none;
}


.page-progress span {
  display: block;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--dusty-pink),
      var(--gold)
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  will-change:
    transform;
}


/* =========================================================
   ТЕКСТУРА БУМАГИ
   ========================================================= */

.paper-noise {
  position: absolute;

  inset: 0;

  opacity: 0.1;

  pointer-events: none;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.16'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


/* =========================================================
   ПРИВЕТСТВЕННЫЙ ЭКРАН
   ========================================================= */

.welcome {
  --mx: 0px;
  --my: 0px;

  --mx-soft: 0px;
  --my-soft: 0px;

  --mx-core: 0px;
  --my-core: 0px;

  position: fixed;

  z-index: 4000;

  inset: 0;

  display: grid;

  place-items: center;

  min-height: 100svh;

  overflow: hidden;

  padding: 20px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(255, 255, 255, 0.96),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #FFFDFB 0%,
      #FFF8F0 52%,
      #F8E4E4 100%
    );

  transition:
    opacity 1s ease,
    visibility 1s ease;
}


.welcome.is-hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


.welcome__light {
  position: absolute;

  border-radius:
    50%;

  filter:
    blur(30px);

  pointer-events:
    none;
}


.welcome__light--one {
  top: -18%;
  left: -8%;

  width:
    min(64vw, 780px);

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(243, 198, 200, 0.34),
      transparent 68%
    );

  animation:
    morningLight
    10s
    ease-in-out
    infinite;
}


.welcome__light--two {
  right: -12%;
  bottom: -22%;

  width:
    min(55vw, 720px);

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(232, 183, 190, 0.26),
      transparent 68%
    );

  animation:
    morningLight
    12s
    ease-in-out
    infinite
    reverse;
}


.welcome__content {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align:
    center;
}


.welcome__eyebrow,
.welcome__hint,
.hero__eyebrow,
.hero__date,
.section-kicker,
.glass-kicker,
.editorial-copy > span {
  font-family:
    var(--ui);

  font-weight:
    400;

  letter-spacing:
    0.24em;

  text-transform:
    uppercase;
}


.welcome__eyebrow {
  margin:
    0 0 22px;

  color:
    rgba(74, 59, 67, 0.5);

  font-size:
    0.62rem;
}


.welcome__hint {
  margin:
    20px 0 0;

  color:
    rgba(74, 59, 67, 0.48);

  font-size:
    0.6rem;

  animation:
    hintFloat
    2.8s
    ease-in-out
    infinite;
}


/* =========================================================
   ПИОН
   ИСПРАВЛЕННАЯ СИММЕТРИЯ
   ========================================================= */

.flower-stage {
  position: relative;

  display: grid;

  place-items: center;

  width:
    min(560px, 90vw);

  height:
    min(560px, 72svh);

  perspective:
    1200px;
}


.peony-button {
  position: relative;

  z-index: 4;

  width: 330px;
  height: 330px;

  padding: 0;

  border: 0;

  background:
    transparent;
}


.peony {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  filter:
    drop-shadow(
      0 22px 28px
      rgba(116, 70, 79, 0.14)
    );

  transform:
    translate3d(
      var(--mx-soft),
      var(--my-soft),
      0
    );

  transition:
    transform
    0.45s
    var(--ease);
}


.peony-button:hover .peony {
  transform:
    translate3d(
      var(--mx-soft),
      var(--my-soft),
      0
    )
    scale(1.018);
}


.peony__petal {
  --x: 0px;
  --y: 0px;

  --open-x: 0px;
  --open-y: 0px;

  --r: 0deg;
  --open-r: 0deg;

  --s: 1;
  --open-s: 0.94;

  position: absolute;

  top:
    calc(
      50% + var(--my)
    );

  left:
    calc(
      50% + var(--mx)
    );

  width:
    126px;

  height:
    176px;

  border-radius:
    70% 30% 66% 34%
    /
    58% 62% 38% 42%;

  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 251, 0.98) 0%,
      rgba(255, 247, 243, 0.98) 24%,
      rgba(248, 221, 221, 0.98) 54%,
      rgba(243, 198, 200, 0.96) 82%,
      rgba(232, 183, 190, 0.96) 100%
    );

  box-shadow:
    inset
    0 2px 0
    rgba(255, 255, 255, 0.76),

    inset
    12px -10px 26px
    rgba(219, 143, 151, 0.11),

    0 10px 24px
    rgba(173, 104, 117, 0.12);

  transform:
    translate(
      calc(-50% + var(--x)),
      calc(-50% + var(--y))
    )
    rotate(var(--r))
    scale(var(--s));

  transform-origin:
    50% 78%;

  transition:
    transform 1.7s var(--ease),
    opacity 1s ease,
    top 0.45s var(--ease),
    left 0.45s var(--ease);

  will-change:
    transform;
}


.peony__petal::before {
  position: absolute;

  inset:
    10% 18% 24%;

  content: "";

  border-radius:
    inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5),
      transparent
    );

  filter:
    blur(1px);
}


/* =========================================================
   ВНЕШНИЙ КРУГ ЛЕПЕСТКОВ
   ========================================================= */

.petal-01 {
  --x: 0px;
  --y: -98px;
  --r: 0deg;

  --open-x: 0px;
  --open-y: -172px;
  --open-r: 0deg;
}


.petal-02 {
  --x: 50px;
  --y: -82px;
  --r: 30deg;

  --open-x: 94px;
  --open-y: -146px;
  --open-r: 35deg;
}


.petal-03 {
  --x: 88px;
  --y: -46px;
  --r: 60deg;

  --open-x: 158px;
  --open-y: -86px;
  --open-r: 68deg;
}


.petal-04 {
  --x: 102px;
  --y: 4px;
  --r: 90deg;

  --open-x: 184px;
  --open-y: 0px;
  --open-r: 98deg;
}


.petal-05 {
  --x: 84px;
  --y: 54px;
  --r: 120deg;

  --open-x: 146px;
  --open-y: 98px;
  --open-r: 128deg;
}


.petal-06 {
  --x: 46px;
  --y: 88px;
  --r: 150deg;

  --open-x: 82px;
  --open-y: 156px;
  --open-r: 158deg;
}


.petal-07 {
  --x: 0px;
  --y: 102px;
  --r: 180deg;

  --open-x: 0px;
  --open-y: 182px;
  --open-r: 180deg;
}


.petal-08 {
  --x: -46px;
  --y: 88px;
  --r: 210deg;

  --open-x: -82px;
  --open-y: 156px;
  --open-r: 202deg;
}


.petal-09 {
  --x: -84px;
  --y: 54px;
  --r: 240deg;

  --open-x: -146px;
  --open-y: 98px;
  --open-r: 232deg;
}


.petal-10 {
  --x: -102px;
  --y: 4px;
  --r: 270deg;

  --open-x: -184px;
  --open-y: 0px;
  --open-r: 262deg;
}


.petal-11 {
  --x: -88px;
  --y: -46px;
  --r: 300deg;

  --open-x: -158px;
  --open-y: -86px;
  --open-r: 292deg;
}


.petal-12 {
  --x: -50px;
  --y: -82px;
  --r: 330deg;

  --open-x: -94px;
  --open-y: -146px;
  --open-r: 325deg;
}


/* =========================================================
   ВНУТРЕННИЕ ЛЕПЕСТКИ
   ========================================================= */

.peony__petal--inner {
  top:
    calc(
      50% + var(--my-soft)
    );

  left:
    calc(
      50% + var(--mx-soft)
    );

  width:
    88px;

  height:
    116px;

  border-radius:
    70% 30% 68% 32%
    /
    58% 60% 40% 42%;

  background:
    linear-gradient(
      180deg,
      #FFFDFB 0%,
      #FDEEEE 38%,
      #F6D3D4 72%,
      #F3C6C8 100%
    );

  z-index: 8;
}


.inner-01 {
  --x: 0px;
  --y: -48px;
  --r: 0deg;

  --open-x: 0px;
  --open-y: -90px;
  --open-r: 0deg;
}


.inner-02 {
  --x: 42px;
  --y: -12px;
  --r: 72deg;

  --open-x: 78px;
  --open-y: -22px;
  --open-r: 78deg;
}


.inner-03 {
  --x: 26px;
  --y: 38px;
  --r: 144deg;

  --open-x: 48px;
  --open-y: 72px;
  --open-r: 150deg;
}


.inner-04 {
  --x: -26px;
  --y: 38px;
  --r: 216deg;

  --open-x: -48px;
  --open-y: 72px;
  --open-r: 210deg;
}


.inner-05 {
  --x: -42px;
  --y: -12px;
  --r: 288deg;

  --open-x: -78px;
  --open-y: -22px;
  --open-r: 282deg;
}


/* =========================================================
   СЕРДЦЕВИНА ПИОНА
   ========================================================= */

.peony__core {
    position: absolute;
    /* z-index: 20; */
    top: calc(61% + var(--my-core));
    left: calc(50% + var(--mx-core));
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: radial-gradient(circle, #F8DE97 0%, #EBBB55 42%, #D9992C 74%, #C98522 100%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 35px rgba(226, 174, 67, 0.25);
    transition: top 0.45s var(--ease), left 0.45s var(--ease);
}


.peony__core::before {
  position: absolute;

  inset: 13px;

  content: "";

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 238, 173, 0.78),
      rgba(229, 164, 48, 0.15) 70%,
      transparent 72%
    );
}


.peony__core i {
  position: absolute;

  z-index: 2;

  top: 50%;
  left: 50%;

  width: 4px;
  height: 29px;

  border-radius:
    10px;

  background:
    #D98C21;

  transform-origin:
    center 0;
}


.peony__core i::after {
  position: absolute;

  left: 50%;
  bottom: -2px;

  width: 7px;
  height: 7px;

  content: "";

  border-radius:
    50%;

  background:
    #F2C45C;

  transform:
    translateX(-50%);
}


.peony__core i:nth-child(1) {
  transform:
    rotate(0deg)
    translateY(-3px);
}


.peony__core i:nth-child(2) {
  transform:
    rotate(72deg)
    translateY(-3px);
}


.peony__core i:nth-child(3) {
  transform:
    rotate(144deg)
    translateY(-3px);
}


.peony__core i:nth-child(4) {
  transform:
    rotate(216deg)
    translateY(-3px);
}


.peony__core i:nth-child(5) {
  transform:
    rotate(288deg)
    translateY(-3px);
}


/* =========================================================
   КАРТОЧКА ПРИГЛАШЕНИЯ
   ========================================================= */

.opening-card {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 4%;

  width:
    min(350px, 78vw);

  padding:
    34px 28px;

  border:
    1px solid
    rgba(74, 59, 67, 0.1);

  border-radius:
    7px;

  background:
    rgba(255, 253, 251, 0.94);

  box-shadow:
    0 28px 65px
    rgba(74, 59, 67, 0.11);

  opacity: 0;

  transform:
    translate(-50%, 60px)
    scale(0.9);

  transition:
    opacity 1s ease,
    transform 1.45s var(--ease);

  backdrop-filter:
    blur(14px);
}


.opening-card::after {
  position: absolute;

  inset: 10px;

  content: "";

  border:
    1px solid
    rgba(210, 178, 127, 0.2);

  pointer-events:
    none;
}


.opening-card__micro {
  display: block;

  font-family:
    var(--ui);

  color:
    rgba(74, 59, 67, 0.48);

  font-size:
    0.56rem;

  letter-spacing:
    0.26em;

  text-transform:
    uppercase;
}


.opening-card__line {
  display: block;

  width: 1px;
  height: 40px;

  margin:
    14px auto;

  background:
    linear-gradient(
      transparent,
      var(--gold),
      transparent
    );
}


.opening-card__date {
  margin:
    0 0 9px;

  font-family:
    var(--ui);

  font-size:
    0.62rem;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.opening-card__names {
  margin: 0;

  font-family:
    var(--display);

  font-size:
    3rem;

  font-weight:
    400;

  line-height:
    0.9;
}


.opening-card__names em {
  color:
    var(--gold);

  font-weight:
    300;
}


.opening-card__text {
  margin:
    14px 0 0;

  font-size:
    1rem;
}


/* =========================================================
   РАСКРЫТИЕ ПИОНА
   ========================================================= */

.welcome.is-opening
.opening-card {
  opacity: 1;

  transform:
    translate(-50%, -92px)
    scale(1);
}


.welcome.is-opening
.peony__petal {
  transform:
    translate(
      calc(
        -50% + var(--open-x)
      ),
      calc(
        -50% + var(--open-y)
      )
    )
    rotate(
      var(--open-r)
    )
    scale(
      var(--open-s)
    );
}


.welcome.is-opening
.peony__core {
  animation:
    coreLight
    2s
    ease-in-out
    forwards;
}


/* =========================================================
   ГЛАВНЫЙ ЭКРАН
   ========================================================= */

.hero {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  min-height:
    100svh;

  overflow: hidden;

  background:
    var(--cream);
}


.hero__photo {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit:
    cover;

  object-position:
    center;

  filter:
    none;

  transform:
    scale(1.025);
}


.hero__paper {
  position: absolute;

  inset: 0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.11),
      transparent 58%
    );
}


.hero__inner {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  min-height:
    100svh;
}


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

  padding:
    60px 20px;

  text-align:
    center;

  opacity: 0;

  transform:
    translateY(26px);
}


.hero__content.is-visible {
  opacity: 1;

  transform:
    translateY(0);

  transition:
    opacity 1.3s ease,
    transform 1.3s var(--ease);
}


.hero__eyebrow {
  margin:
    0 0 18px;

  color:
    var(--text);

  font-size:
    0.66rem;

  text-shadow:
    0 2px 15px
    rgba(255, 255, 255, 0.75);
}


.hero__title {
  display: flex;

  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap:
    0 20px;

  margin: 0;

  color:
    var(--text);

  font-family:
    var(--display);

  font-size:
    clamp(
      4.5rem,
      11vw,
      8.6rem
    );

  font-weight:
    400;

  letter-spacing:
    0.01em;

  line-height:
    0.9;

  text-shadow:
    0 4px 26px
    rgba(255, 255, 255, 0.75);
}


.hero__title span {
  color:
    var(--gold);

  font-size:
    0.66em;

  font-style:
    italic;
}


.hero__subtitle {
  margin:
    24px auto 0;

  color:
    var(--text);

  font-size:
    clamp(
      1.28rem,
      2.3vw,
      1.7rem
    );

  text-shadow:
    0 3px 15px
    rgba(255, 255, 255, 0.86);
}


.hero__date {
  margin:
    16px 0 0;

  color:
    rgba(74, 59, 67, 0.82);

  font-size:
    0.7rem;

  text-shadow:
    0 2px 12px
    rgba(255, 255, 255, 0.9);
}


.scroll-down {
  position: absolute;

  z-index: 3;

  left: 50%;

  bottom:
    max(
      22px,
      env(safe-area-inset-bottom)
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 8px;

  border: 0;

  background:
    transparent;

  color:
    var(--text);

  transform:
    translateX(-50%);

  text-shadow:
    0 2px 12px
    rgba(255, 255, 255, 0.92);
}


.scroll-down span {
  font-family:
    var(--ui);

  font-size:
    0.54rem;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}


.scroll-down b {
  font-size:
    1.1rem;

  font-weight:
    400;

  animation:
    scrollArrow
    2.6s
    ease-in-out
    infinite;
}


/* =========================================================
   БЕГУЩАЯ СТРОКА
   ========================================================= */

.love-strip {
  overflow: hidden;

  background:
    var(--milk);

  border-top:
    1px solid
    var(--line);

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


.love-strip__track {
  display: flex;

  width:
    max-content;

  animation:
    marquee
    26s
    linear
    infinite;
}


.love-strip__track span {
  display: block;

  padding:
    16px 18px;

  color:
    rgba(74, 59, 67, 0.58);

  font-family:
    var(--ui);

  font-size:
    0.62rem;

  letter-spacing:
    0.22em;

  white-space:
    nowrap;
}


/* =========================================================
   ОБЩИЕ СЕКЦИИ
   ========================================================= */

.section {
  position: relative;

  padding:
    clamp(
      88px,
      10vw,
      140px
    )
    0;

  overflow: hidden;
}


.section--solid {
  background:
    var(--milk);
}


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


.section-kicker {
  margin:
    0 0 13px;

  color:
    rgba(74, 59, 67, 0.5);

  font-size:
    0.64rem;

  text-align:
    center;
}


.section-title {
  margin:
    0 0 58px;

  color:
    var(--text);

  font-family:
    var(--display);

  font-size:
    clamp(
      3.2rem,
      7vw,
      5.6rem
    );

  font-weight:
    400;

  letter-spacing:
    0.01em;

  line-height:
    0.94;

  text-align:
    center;
}


.section-title::after {
  display: block;

  width: 80px;
  height: 1px;

  margin:
    18px auto 0;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      transparent
    );
}


/* =========================================================
   НАША ИСТОРИЯ
   ========================================================= */

.couple-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    clamp(
      40px,
      7vw,
      90px
    );

  align-items:
    center;
}


.couple-photo {
  margin: 0;

  overflow: hidden;

  border-radius:
    32px;

  box-shadow:
    var(--shadow);
}


.couple-photo img {
  width: 100%;

  transition:
    transform
    1.3s
    var(--ease);
}


.couple-photo:hover img {
  transform:
    scale(1.045);
}


.couple-copy {
  display: grid;

  gap: 22px;
}


.couple-copy p {
  margin: 0;

  color:
    rgba(74, 59, 67, 0.84);

  font-size:
    clamp(
      1.22rem,
      1.8vw,
      1.5rem
    );

  line-height:
    1.7;
}


.couple-signature {
  margin-top:
    16px;

  color:
    var(--dusty-pink);

  font-family:
    var(--display);

  font-size:
    4rem;
}


/* =========================================================
   ФОТО-СЕКЦИИ
   ========================================================= */

.photo-section {
  position: relative;

  display: flex;

  align-items: center;

  min-height:
    720px;

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    cover;
}


.photo-section--note {
  background-image:
    url("3.jpg");
}


.photo-section--venue {
  background-image:
    url("10.jpg");
}


.photo-section--highlights {
  background-image:
    url("6.jpg");
}


.photo-section--closing {
  background-image:
    url("7.jpg");

  background-position:
    center 48%;
}


.photo-section::before {
  position: absolute;

  inset: 0;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 248, 240, 0.04)
    );
}


.photo-section > .container {
  position: relative;

  z-index: 2;
}


/* =========================================================
   СТЕКЛО НА ФОТО
   ========================================================= */

.photo-glass {
  position: relative;

  padding:
    clamp(
      34px,
      6vw,
      64px
    );

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

  border-radius:
    34px;

  background:
    rgba(255, 253, 251, 0.67);

  backdrop-filter:
    blur(18px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(115%);

  box-shadow:
    0 30px 90px
    rgba(74, 59, 67, 0.14);
}


.photo-glass::after {
  position: absolute;

  inset: 12px;

  content: "";

  border:
    1px solid
    rgba(210, 178, 127, 0.22);

  border-radius:
    26px;

  pointer-events: none;
}


.photo-glass--center {
  max-width:
    800px;

  margin:
    auto;

  text-align:
    center;
}


.glass-kicker {
  margin:
    0 0 16px;

  color:
    rgba(74, 59, 67, 0.56);

  font-size:
    0.6rem;
}


.photo-glass blockquote {
  margin: 0;

  font-family:
    var(--display);

  font-size:
    clamp(
      2.2rem,
      5vw,
      4rem
    );

  line-height:
    1.18;
}


.photo-glass__signature {
  margin:
    24px 0 0;

  font-family:
    var(--ui);

  font-size:
    0.68rem;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


/* =========================================================
   ПРОГРАММА
   ========================================================= */

.schedule {
  max-width:
    900px;

  margin:
    auto;

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


.schedule__item {
  display: grid;

  grid-template-columns:
    180px 1fr;

  gap:
    36px;

  padding:
    28px 0;

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


.schedule__item time {
  color:
    var(--gold);

  font-family:
    var(--display);

  font-size:
    2rem;
}


.schedule__item div {
  position: relative;
}


.schedule__item div > span {
  position: absolute;

  top: 2px;
  right: 0;

  color:
    rgba(74, 59, 67, 0.28);

  font-family:
    var(--ui);

  font-size:
    0.58rem;

  letter-spacing:
    0.16em;
}


.schedule__item h3 {
  margin:
    0 0 8px;

  font-family:
    var(--display);

  font-size:
    2rem;

  font-weight:
    400;
}


.schedule__item p {
  max-width:
    560px;

  margin: 0;

  color:
    var(--muted);
}


/* =========================================================
   МЕСТО ПРОВЕДЕНИЯ
   ========================================================= */

.venue-glass {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    24px;

  max-width:
    1020px;

  margin:
    auto;

  padding:
    20px;

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

  border-radius:
    38px;

  background:
    rgba(255, 253, 251, 0.64);

  backdrop-filter:
    blur(18px);

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

  box-shadow:
    0 30px 90px
    rgba(74, 59, 67, 0.16);
}


.venue-glass__copy {
  padding:
    clamp(
      26px,
      5vw,
      54px
    );
}


.venue-glass__copy h2 {
  margin:
    0 0 24px;

  font-family:
    var(--display);

  font-size:
    clamp(
      2.8rem,
      6vw,
      4.8rem
    );

  font-weight:
    400;

  line-height:
    0.92;
}


.venue-glass__copy h3 {
  margin:
    0 0 8px;

  font-family:
    var(--display);

  font-size:
    1.8rem;

  font-weight:
    400;
}


.venue-glass__copy p {
  margin:
    0 0 15px;

  color:
    rgba(74, 59, 67, 0.8);
}


.venue-photo {
  position: relative;

  min-height:
    500px;

  margin: 0;

  overflow: hidden;

  border-radius:
    28px;
}


.venue-photo img {
  width: 100%;
  height: 100%;

  object-fit:
    cover;

  filter:
    none;
}


.venue-photo figcaption {
  position: absolute;

  right: 16px;
  bottom: 16px;

  padding:
    8px 12px;

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

  border-radius:
    999px;

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

  color:
    var(--text);

  font-family:
    var(--ui);

  font-size:
    0.52rem;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(10px);
}


/* =========================================================
   НЕБОЛЬШИЕ ДЕТАЛИ
   ========================================================= */

.details-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.detail-card {
  position: relative;

  min-height:
    320px;

  padding:
    30px;

  overflow: hidden;

  border:
    1px solid
    rgba(74, 59, 67, 0.09);

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 251, 0.95),
      rgba(255, 248, 240, 0.94)
    );

  box-shadow:
    var(--shadow-soft);

  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s ease;
}


.detail-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 25px 60px
    rgba(74, 59, 67, 0.12);
}


.detail-card__number {
  color:
    var(--gold);

  font-family:
    var(--display);

  font-size:
    2rem;
}


.detail-card__line {
  display: block;

  width: 42px;
  height: 1px;

  margin:
    22px 0 32px;

  background:
    var(--gold);
}


.detail-card h3 {
  margin:
    0 0 14px;

  font-family:
    var(--display);

  font-size:
    2rem;

  font-weight:
    400;

  line-height:
    1.05;
}


.detail-card p {
  margin: 0;

  color:
    var(--muted);
}


.detail-card__gold {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--gold);

  box-shadow:
    -15px 0 0
    rgba(210, 178, 127, 0.5),

    -30px 0 0
    rgba(210, 178, 127, 0.2);
}


.palette {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top:
    22px;
}


.palette span {
  width: 30px;
  height: 30px;

  border:
    1px solid
    rgba(74, 59, 67, 0.1);

  border-radius:
    50%;

  background:
    var(--color);

  box-shadow:
    inset 0 0 0 4px
    rgba(255, 255, 255, 0.42);
}


/* =========================================================
   ДОПОЛНЕНИЕ
   ========================================================= */

.photo-section--highlights {
  display: block;

  min-height: auto;
}


.photo-section__heading {
  width:
    min(700px, 100%);

  margin:
    0 auto 46px;

  padding:
    30px;

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

  border-radius:
    28px;

  background:
    rgba(255, 253, 251, 0.68);

  text-align:
    center;

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}


.photo-section__heading h2 {
  margin: 0;

  font-family:
    var(--display);

  font-size:
    clamp(
      3.2rem,
      7vw,
      5.4rem
    );

  font-weight:
    400;
}


.editorial-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    clamp(
      22px,
      4vw,
      46px
    );

  align-items:
    stretch;

  margin-bottom:
    46px;
}


.editorial-row--reverse
.editorial-copy {
  order: 2;
}


.editorial-row--reverse
.editorial-photo {
  order: 1;
}


.editorial-copy {
  padding:
    clamp(
      28px,
      4vw,
      48px
    );

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

  border-radius:
    30px;

  background:
    rgba(255, 253, 251, 0.8);

  box-shadow:
    var(--shadow-soft);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.editorial-copy > span {
  display: block;

  margin-bottom:
    18px;

  color:
    var(--gold);

  font-size:
    0.56rem;
}


.editorial-copy h3 {
  margin:
    0 0 18px;

  font-family:
    var(--display);

  font-size:
    clamp(
      2.4rem,
      4vw,
      3.6rem
    );

  font-weight:
    400;
}


.editorial-copy p {
  margin:
    0 0 15px;

  color:
    rgba(74, 59, 67, 0.82);
}


.editorial-copy ul {
  display: grid;

  gap: 7px;

  margin:
    0 0 17px;

  padding: 0;

  list-style:
    none;
}


.editorial-copy li {
  position: relative;

  padding-left:
    20px;

  color:
    rgba(74, 59, 67, 0.8);
}


.editorial-copy li::before {
  position: absolute;

  left: 0;

  content: "•";

  color:
    var(--gold);
}


.editorial-photo {
  position: relative;

  min-height:
    440px;

  margin: 0;

  overflow: hidden;

  border:
    10px solid
    rgba(255, 253, 251, 0.8);

  border-radius:
    30px;

  background:
    var(--milk);

  box-shadow:
    var(--shadow);
}


.editorial-photo img {
  width: 100%;
  height: 100%;

  object-fit:
    cover;

  filter:
    none;

  transition:
    transform
    1.3s
    var(--ease);
}


.editorial-photo:hover img {
  transform:
    scale(1.045);
}


.editorial-photo--feature {
  box-shadow:
    0 32px 90px
    rgba(74, 59, 67, 0.18);
}


/* =========================================================
   ОБРАТНЫЙ ОТСЧЕТ
   ========================================================= */

.countdown-card {
  max-width:
    940px;

  margin:
    auto;

  padding:
    clamp(
      28px,
      5vw,
      54px
    );

  border:
    1px solid
    rgba(74, 59, 67, 0.08);

  border-radius:
    34px;

  background:
    rgba(255, 253, 251, 0.92);

  box-shadow:
    var(--shadow-soft);

  text-align:
    center;
}


.countdown-card > p {
  margin:
    0 0 30px;

  color:
    rgba(74, 59, 67, 0.54);

  font-family:
    var(--ui);

  font-size:
    0.62rem;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.countdown-grid {
  display: grid;

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

  gap:
    12px;
}


.countdown-grid > div {
  padding:
    26px 8px;

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

  border-radius:
    22px;

  background:
    var(--milk);
}


.countdown-grid strong {
  display: block;

  font-family:
    var(--display);

  font-size:
    clamp(
      3rem,
      6vw,
      5.4rem
    );

  font-weight:
    400;

  line-height:
    1;
}


.countdown-grid span {
  display: block;

  margin-top:
    10px;

  color:
    rgba(74, 59, 67, 0.46);

  font-family:
    var(--ui);

  font-size:
    0.54rem;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


/* =========================================================
   ФИНАЛЬНЫЙ БЛОК
   ========================================================= */

.closing-card h2 {
  margin: 0;

  font-family:
    var(--display);

  font-size:
    clamp(
      3rem,
      7vw,
      5.5rem
    );

  font-weight:
    400;

  line-height:
    0.94;
}


.closing-card > p:not(.glass-kicker) {
  max-width:
    570px;

  margin:
    20px auto 0;

  font-size:
    1.2rem;
}


.glass-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height:
    52px;

  margin-top:
    28px;

  padding:
    12px 24px;

  border:
    1px solid
    rgba(210, 178, 127, 0.36);

  border-radius:
    999px;

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

  font-family:
    var(--ui);

  font-size:
    0.62rem;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  transition:
    transform 0.3s var(--ease),
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.glass-button:hover {
  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    var(--shadow-soft);

  transform:
    translateY(-3px);
}


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

.rsvp-section {
  position: relative;

  background:
    linear-gradient(
      145deg,
      #FFFDFB 0%,
      #FFF8F0 46%,
      #F8E8E7 100%
    );
}


.rsvp-section__glow {
  position: absolute;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(12px);
}


.rsvp-section__glow--one {
  top: 4%;
  left: -10%;

  width:
    min(44vw, 560px);

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(243, 198, 200, 0.28),
      transparent 68%
    );
}


.rsvp-section__glow--two {
  right: -8%;
  bottom: -16%;

  width:
    min(48vw, 620px);

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(210, 178, 127, 0.14),
      transparent 68%
    );
}


/* =========================================================
   СТЕКЛЯННАЯ ФОРМА
   ========================================================= */

.rsvp-glass {
  position: relative;

  z-index: 2;

  width:
    min(860px, 100%);

  margin:
    auto;

  padding:
    clamp(
      32px,
      6vw,
      64px
    );

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

  border-radius:
    42px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.62),
      rgba(255, 253, 251, 0.38)
    );

  box-shadow:
    0 40px 120px
    rgba(74, 59, 67, 0.14),

    inset
    0 1px 0
    rgba(255, 255, 255, 0.95);

  backdrop-filter:
    blur(28px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(120%);

  overflow: hidden;
}


.rsvp-glass::before {
  position: absolute;

  top: -100px;
  right: -80px;

  width: 280px;
  height: 280px;

  content: "";

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(243, 198, 200, 0.3),
      transparent 68%
    );

  pointer-events:
    none;
}


.rsvp-glass::after {
  position: absolute;

  left: -100px;
  bottom: -120px;

  width: 300px;
  height: 300px;

  content: "";

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(210, 178, 127, 0.13),
      transparent 68%
    );

  pointer-events:
    none;
}


.rsvp-glass__border {
  position: absolute;

  z-index: 1;

  inset: 16px;

  border:
    1px solid
    rgba(210, 178, 127, 0.24);

  border-radius:
    30px;

  pointer-events:
    none;
}


.rsvp-glass form {
  position: relative;

  z-index: 3;

  display: grid;

  gap: 26px;
}


/* =========================================================
   ПОЛЯ
   ========================================================= */

.form-row {
  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;
}


.form-row label,
.form-row legend {
  display: block;

  width: 100%;

  margin:
    0 0 10px;

  padding: 0;

  color:
    rgba(74, 59, 67, 0.78);

  font-family:
    var(--ui);

  font-size:
    0.66rem;

  font-weight:
    500;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.form-row input[type="text"],
.form-row select,
.form-row textarea {
  width: 100%;

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

  border-radius:
    18px;

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

  color:
    var(--text);

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.8),

    0 8px 24px
    rgba(74, 59, 67, 0.04);

  backdrop-filter:
    blur(10px);

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


.form-row input[type="text"],
.form-row select {
  height: 58px;

  padding:
    0 18px;
}


.form-row textarea {
  min-height:
    130px;

  padding:
    16px 18px;

  resize:
    vertical;
}


.form-row input::placeholder,
.form-row textarea::placeholder {
  color:
    rgba(74, 59, 67, 0.36);
}


.form-row input[type="text"]:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;

  border-color:
    rgba(210, 178, 127, 0.5);

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

  box-shadow:
    0 0 0 4px
    rgba(243, 198, 200, 0.14),

    0 12px 28px
    rgba(74, 59, 67, 0.05);
}


/* =========================================================
   ВАРИАНТЫ ОТВЕТА
   ========================================================= */

.choice-grid {
  display: grid;

  gap: 10px;
}


.choice-grid--3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}


.choice-grid--2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


.choice {
  position: relative;

  cursor: pointer;
}


.choice input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events:
    none;
}


.choice span {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height:
    54px;

  padding:
    10px 14px;

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

  border-radius:
    18px;

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

  color:
    rgba(74, 59, 67, 0.76);

  font-size:
    1rem;

  text-align:
    center;

  box-shadow:
    0 8px 22px
    rgba(74, 59, 67, 0.035);

  backdrop-filter:
    blur(10px);

  transition:
    transform 0.28s var(--ease),
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}


.choice:hover span {
  transform:
    translateY(-2px);

  border-color:
    rgba(210, 178, 127, 0.42);
}


.choice input:checked + span {
  border-color:
    rgba(210, 178, 127, 0.55);

  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 251, 0.9),
      rgba(243, 198, 200, 0.4)
    );

  box-shadow:
    0 13px 30px
    rgba(190, 129, 141, 0.12);
}


.choice input:focus-visible + span {
  outline:
    3px solid
    rgba(210, 178, 127, 0.28);

  outline-offset:
    3px;
}


/* =========================================================
   ОШИБКИ ФОРМЫ
   ========================================================= */

.form-error {
  display: block;

  min-height:
    16px;

  margin-top:
    6px;

  color:
    #9D5F69;

  font-family:
    var(--ui);

  font-size:
    0.62rem;
}


.honeypot {
  position:
    absolute !important;

  left:
    -10000px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/* =========================================================
   КНОПКА ОТПРАВКИ
   ========================================================= */

.submit-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height:
    60px;

  border: 0;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #E0B5BB,
      #C9919C
    );

  color:
    #fff;

  box-shadow:
    0 18px 42px
    rgba(195, 137, 148, 0.28);

  font-family:
    var(--ui);

  font-size:
    0.7rem;

  font-weight:
    500;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;

  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s ease,
    filter 0.3s ease;
}


.submit-button:hover {
  transform:
    translateY(-3px);

  filter:
    brightness(1.03);

  box-shadow:
    0 25px 55px
    rgba(195, 137, 148, 0.34);
}


.submit-button:disabled {
  opacity:
    0.68;

  cursor:
    default;

  transform:
    none;
}


.submit-button__loader {
  display: none;

  width: 20px;
  height: 20px;

  border:
    2px solid
    rgba(255, 255, 255, 0.38);

  border-top-color:
    #fff;

  border-radius:
    50%;

  animation:
    spin
    0.8s
    linear
    infinite;
}


.submit-button.is-loading
.submit-button__text {
  display: none;
}


.submit-button.is-loading
.submit-button__loader {
  display: block;
}


/* =========================================================
   СТАТУС ФОРМЫ
   ========================================================= */

.form-status {
  display: none;

  padding:
    15px 17px;

  border-radius:
    16px;

  font-family:
    var(--ui);

  font-size:
    0.72rem;

  line-height:
    1.55;
}


.form-status.is-visible {
  display: block;
}


.form-status.is-success {
  background:
    rgba(255, 255, 255, 0.58);

  color:
    #6F654E;

  border:
    1px solid
    rgba(210, 178, 127, 0.26);
}


.form-status.is-error {
  background:
    rgba(255, 238, 241, 0.72);

  color:
    #995764;

  border:
    1px solid
    rgba(157, 87, 100, 0.22);
}


/* =========================================================
   ПОДВАЛ
   ========================================================= */

.footer {
  padding:
    82px 0;

  background:
    var(--milk);

  text-align:
    center;

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


.footer p {
  margin: 0;

  color:
    rgba(74, 59, 67, 0.48);

  font-family:
    var(--ui);

  font-size:
    0.58rem;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.footer h2 {
  margin:
    18px 0;

  font-family:
    var(--display);

  font-size:
    clamp(
      3.5rem,
      8vw,
      6rem
    );

  font-weight:
    400;
}


.footer h2 span {
  color:
    var(--gold);
}


/* =========================================================
   ПОЯВЛЕНИЕ
   ========================================================= */

.reveal {
  opacity: 0;

  filter:
    blur(10px);

  transform:
    translateY(40px);

  transition:
    opacity 0.95s var(--ease),
    transform 0.95s var(--ease),
    filter 0.95s ease;

  will-change:
    opacity,
    transform,
    filter;
}


.reveal.is-visible {
  opacity: 1;

  filter:
    blur(0);

  transform:
    translateY(0);
}


.details-grid
.reveal:nth-child(2) {
  transition-delay:
    0.1s;
}


.details-grid
.reveal:nth-child(3) {
  transition-delay:
    0.2s;
}


/* =========================================================
   АНИМАЦИИ
   ========================================================= */

@keyframes morningLight {

  0%,
  100% {
    opacity:
      0.65;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }


  50% {
    opacity:
      1;

    transform:
      translate3d(4%, -3%, 0)
      scale(1.08);
  }

}


@keyframes hintFloat {

  0%,
  100% {
    opacity:
      0.42;

    transform:
      translateY(0);
  }


  50% {
    opacity:
      0.82;

    transform:
      translateY(-5px);
  }

}


@keyframes coreLight {

  0% {
    box-shadow:
      0 0 20px
      rgba(226, 174, 67, 0.22);

    transform:
      translate(-50%, -50%)
      scale(1);
  }


  50% {
    box-shadow:
      0 0 55px
      rgba(226, 174, 67, 0.5);

    transform:
      translate(-50%, -50%)
      scale(1.12);
  }


  100% {
    box-shadow:
      0 0 32px
      rgba(226, 174, 67, 0.28);

    transform:
      translate(-50%, -50%)
      scale(1);
  }

}


@keyframes scrollArrow {

  0%,
  100% {
    transform:
      translateY(0);
  }


  50% {
    transform:
      translateY(-7px);
  }

}


@keyframes marquee {

  to {
    transform:
      translateX(-50%);
  }

}


@keyframes spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media (max-width: 980px) {

  :root {
    --container:
      min(
        100% - 36px,
        900px
      );
  }


  .couple-grid,
  .venue-glass,
  .editorial-row {
    grid-template-columns:
      1fr;
  }


  .venue-photo {
    min-height:
      430px;
  }


  .editorial-row--reverse
  .editorial-copy,
  .editorial-row--reverse
  .editorial-photo {
    order:
      initial;
  }


  .details-grid {
    grid-template-columns:
      1fr;
  }


  .detail-card {
    min-height:
      240px;
  }

}


/* =========================================================
   МОБИЛЬНЫЕ УСТРОЙСТВА
   ========================================================= */

@media (max-width: 720px) {

  :root {
    --container:
      calc(100% - 28px);
  }


  body {
    font-size:
      1.04rem;
  }


  .section {
    padding:
      78px 0;
  }


  /* Пион */

  .flower-stage {
    width:
      min(420px, 94vw);

    height:
      500px;
  }


  .peony-button {
    width:
      270px;

    height:
      270px;
  }


  .peony {
    transform:
      translate3d(
        var(--mx-soft),
        var(--my-soft),
        0
      )
      scale(0.82);
  }


  .peony-button:hover
  .peony {
    transform:
      translate3d(
        var(--mx-soft),
        var(--my-soft),
        0
      )
      scale(0.82);
  }


  .opening-card {
    width:
      min(320px, 84vw);
  }


  .welcome.is-opening
  .opening-card {
    transform:
      translate(-50%, -70px)
      scale(1);
  }


  /* Главный экран */

  .hero__photo {
    object-position:
      center center;

    transform:
      scale(1.02);

    filter:
      none;
  }


  .hero__content {
    padding:
      80px 12px;
  }


  .hero__title {
    gap:
      3px 10px;

    font-size:
      clamp(
        4rem,
        17vw,
        6.2rem
      );
  }


  .hero__subtitle {
    max-width:
      330px;

    font-size:
      1.15rem;
  }


  /* Программа */

  .schedule__item {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .schedule__item time {
    font-size:
      1.7rem;
  }


  /* Фотографии */

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

    background-attachment:
      scroll;
  }


  .photo-glass {
    padding:
      36px 22px;
  }


  .venue-glass {
    padding:
      12px;

    border-radius:
      28px;
  }


  .venue-glass__copy {
    padding:
      28px 18px 12px;
  }


  .venue-photo {
    min-height:
      340px;

    border-radius:
      22px;
  }


  .editorial-photo {
    min-height:
      330px;
  }


  .editorial-copy {
    padding:
      30px 22px;
  }


  /* Таймер */

  .countdown-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  /* Форма */

  .rsvp-glass {
    padding:
      38px 20px;

    border-radius:
      30px;
  }


  .rsvp-glass__border {
    inset:
      10px;

    border-radius:
      22px;
  }


  .choice-grid--3,
  .choice-grid--2 {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media (max-width: 460px) {

  .section {
    padding:
      68px 0;
  }


  .section-title {
    margin-bottom:
      42px;

    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  .hero__title {
    flex-direction:
      column;

    font-size:
      clamp(
        4rem,
        20vw,
        5.7rem
      );

    line-height:
      0.78;
  }


  .hero__title span {
    margin:
      9px 0;
  }


  .hero__date {
    margin-top:
      22px;
  }


  .photo-glass blockquote {
    font-size:
      2rem;
  }


  .photo-section__heading {
    padding:
      24px 16px;
  }


  .detail-card {
    padding:
      26px 22px;
  }


  .countdown-card {
    padding:
      28px 16px;
  }


  .countdown-grid {
    gap:
      9px;
  }


  .countdown-grid > div {
    padding:
      22px 4px;
  }


  .countdown-grid strong {
    font-size:
      2.8rem;
  }


  .footer {
    padding:
      64px 0;
  }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {

  .couple-photo:hover img,
  .editorial-photo:hover img {
    transform:
      none;
  }


  .detail-card:hover,
  .glass-button:hover,
  .submit-button:hover,
  .choice:hover span {
    transform:
      none;
  }

}


/* =========================================================
   УМЕНЬШЕННАЯ АНИМАЦИЯ
   ========================================================= */

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

  html {
    scroll-behavior:
      auto;
  }


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

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }


  .reveal,
  .hero__content {
    opacity:
      1 !important;

    filter:
      none !important;

    transform:
      none !important;
  }

}