/* =========================================================================
   Custom overrides — all hand-edits on top of the faithful Tilda clone live
   here. Loaded LAST (after Tilda's CSS), so these rules win.
   ========================================================================= */

/* --- Hero photo (Даниил & Ксения) ---------------------------------------
   The couple photo (hero-couple-cut.png) already includes the lace oval frame,
   so the original separate lace-frame layer is hidden to avoid a doubled frame.
   Element 1773139458078 = photo, 1773139599310 = lace frame. */
#rec2013195291 .tn-elem[data-elem-id="1773139599310"] {
  display: none !important;
}
/* The hero photo uses hero-couple-cut.png — the cream rectangle background was
   flood-filled to transparent (Pillow), so the FULL scalloped lace oval shows
   on the hero cream with nothing clipped. (The old clip-path ellipse sliced the
   outer scallops on the sides — removed.) */
/* Desktop: the framed photo fills more of its box than the original did, so
   shrink + vertically center the oval for breathing room (mobile untouched). */
@media (min-width: 1200px) {
  #rec2013195291 .tn-elem[data-elem-id="1773139458078"] {
    width: 450px !important;
    top: 70px !important;
  }
}

/* --- Hero names (Даниил & Ксения) ---------------------------------------
   Replaces the original vector calligraphy with editable script text. */
#rec2013195291 .tn-elem[data-elem-id="1773139666850"] .tn-atom {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}
@font-face {
  /* Denistina — free Cyrillic calligraphy script (X-tina / Anastasia Larina),
     self-hosted from the dafont release; user picked it for the names. */
  font-family: "Denistina";
  src: url("/fonts/Denistina.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.x-names {
  font-family: "Denistina", "Martina", cursive;
  font-weight: 400;
  color: #342619;
  text-align: center;
  line-height: 1.1;
  font-size: clamp(3.5rem, 9vw, 7rem);
  white-space: nowrap;
}
.x-names__amp {
  font-size: 0.8em;
}

/* Mobile: lift the names clear of the oval frame's top scallops. The names stack
   above the photo on phones and the "& Ксения" line was resting on the lace.
   iPhone widths (<=479) just raise the names; the tighter 480-639 artboard packs
   them higher, so there we also nudge the photo down. (Desktop is side-by-side.) */
@media (max-width: 639px) {
  #rec2013195291 .tn-elem[data-elem-id="1773139666850"] { transform: translateY(-26px) !important; }
  #rec2013195291 .tn-elem[data-elem-id="1773139458078"] { transform: translateY(22px); }
}
@media (max-width: 479px) {
  #rec2013195291 .tn-elem[data-elem-id="1773139666850"] { transform: translateY(-32px) !important; }
  #rec2013195291 .tn-elem[data-elem-id="1773139458078"] { transform: translateY(0); }
}

/* --- Play-music badge ----------------------------------------------------
   Two hero elements ship with class `t396__elem--anim-hidden` (opacity:0,
   revealed by Tilda's JS, which we don't run) — reveal them. The 133px ring
   (photo.svg = circular "включить музыку" text) spins; the play triangle in
   its center stays put. */
#rec2013195291 .t396__elem--anim-hidden {
  opacity: 1 !important;
}
#rec2013195291 .tn-elem[data-elem-id="1773150607056"] img {
  animation: x-spin 14s linear infinite;
}
@keyframes x-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Welcome section: date text (replaced the outlined SVG) ------------- */
#rec2013220411 .tn-elem[data-elem-id="1773143701662"] .tn-atom {
  overflow: visible !important;
}
@font-face {
  /* Great Vibes — the copperplate that matches the "Welcome" heading SVG; the
     date uses it so it reads as the same hand. Subset to digits + Cyrillic. */
  font-family: "Great Vibes";
  src: url("/fonts/GreatVibes.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.x-date {
  /* Denistina — same hand as the hero names (user asked for the date to match the
     names rather than the "Welcome" copperplate). */
  font-family: "Denistina", "Martina", cursive;
  font-weight: 400;
  color: #342619;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  white-space: nowrap;
}

/* --- Schedule (rec2013942971): times are now live text in Great Vibes (same
   hand as the Welcome date); the colon-bearing subset of the woff covers them.
   Center BOTH the times and the labels on the section centre so the whole column
   lines up ("ровнее") — the labels had drifted off (esp. the shortened "ужин").
   Times = 762583/804282/813516/821669; labels = 975317.../029309.../046052.../700620. */
#rec2013942971 .tn-elem[data-elem-id="1773145762583"],
#rec2013942971 .tn-elem[data-elem-id="1773145804282"],
#rec2013942971 .tn-elem[data-elem-id="1773145813516"],
#rec2013942971 .tn-elem[data-elem-id="1773145821669"],
#rec2013942971 .tn-elem[data-elem-id="1773145975317000002"],
#rec2013942971 .tn-elem[data-elem-id="1773146029309000003"],
#rec2013942971 .tn-elem[data-elem-id="1773146046052000004"],
#rec2013942971 .tn-elem[data-elem-id="1773145700620"] {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  display: block !important;
  text-align: center !important;
}
#rec2013942971 .tn-elem[data-elem-id="1773145762583"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773145804282"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773145813516"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773145821669"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773145975317000002"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773146029309000003"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773146046052000004"] .tn-atom,
#rec2013942971 .tn-elem[data-elem-id="1773145700620"] .tn-atom {
  overflow: visible !important;
  display: block !important;
  text-align: center !important;
}
.x-time {
  font-family: "Denistina", "Martina", cursive;
  color: #342619;
  font-size: clamp(2.7rem, 9vw, 3.6rem);
  line-height: 1;
  white-space: nowrap;
}
/* Denistina's colon has a wide left bearing; pull it in so times read "15:00". */
.x-time-colon { font-style: normal; margin: 0 -0.08em 0 -0.16em; }

/* --- Gifts section: D&K emblem replaces the faint "Андрей" "A" monogram
   (white line-art on the dark background). object-fit keeps the oval from
   stretching in the wider slot. */
#rec2014318861 .tn-elem[data-elem-id="1773147913837"] img,
#rec2014318861 .tn-elem[data-elem-id="1773147994809"] img,  /* heart couple photo */
#rec2014318861 .tn-elem[data-elem-id="1773148029798"] img {  /* seal -> D&K emblem */
  object-fit: contain !important;
}
/* De-clutter: the big D&K emblem reads as a faint watermark (like the original
   "A"), and the heart is shrunk so it no longer covers the "Дорогие гости" card. */
#rec2014318861 .tn-elem[data-elem-id="1773147913837"] {
  opacity: 0.38 !important;
}
#rec2014318861 .tn-elem[data-elem-id="1773147994809"] {
  transform: scale(0.7);
  transform-origin: top center;
}
/* The seal emblem (1773148029798) is now the envelope drawing the bride sent
   (gifts-envelopes.png, cream line-art on transparent). Enlarge + lift it so it
   peeks above the card's top-left like an envelope tucked behind the note. */
@media (max-width: 639px) {
  #rec2014318861 .tn-elem[data-elem-id="1773148029798"] {
    transform: translateY(-18px) scale(1.4);
    transform-origin: center bottom;
  }
}
@media (min-width: 640px) {
  /* desktop: the seal box overlaps the heart, so shift the envelope left of it */
  #rec2014318861 .tn-elem[data-elem-id="1773148029798"] {
    transform: translate(-95px, -8px);
  }
}
#rec2014318861 .tn-elem[data-elem-id="1773148029798"] img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
/* The new card text (1773148133563) is longer; nudge it up into the gap between
   the heart photo and the "детали" script so it doesn't collide. On phones a
   nudge is enough; on wider screens the text is taller than the gap, so trim the
   font a touch as well. */
@media (max-width: 639px) {
  #rec2014318861 .tn-elem[data-elem-id="1773148133563"] {
    transform: translateY(-27px);
  }
}
@media (min-width: 640px) {
  #rec2014318861 .tn-elem[data-elem-id="1773148133563"] .tn-atom {
    font-size: 17px !important;
  }
  #rec2014318861 .tn-elem[data-elem-id="1773148133563"] {
    transform: translateY(-12px);
  }
}

/* --- Organizer → "Контакты": the heading SVG (Организация свадьбы) is replaced
   with live "Контакты" text in Great Vibes (the original heading's own hand), and
   the organizer name "Маргарита" uses the SAME font, smaller. Both centered. */
#rec2014507321 .tn-elem[data-elem-id="1773158250452"],
#rec2014507321 .tn-elem[data-elem-id="1773158430749"] {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  display: block !important;
  text-align: center !important;
}
#rec2014507321 .tn-elem[data-elem-id="1773158250452"] .tn-atom,
#rec2014507321 .tn-elem[data-elem-id="1773158430749"] .tn-atom {
  overflow: visible !important;
  display: block !important;
  text-align: center !important;
}
.x-contacts {
  font-family: "Denistina", "Martina", cursive;
  color: #e9e4d8;
  font-size: clamp(3.2rem, 13vw, 4.6rem);
  line-height: 1;
  white-space: nowrap;
}
.x-organizer-name {
  font-family: "Denistina", "Martina", cursive;
  color: #e9e4d8;
  font-size: clamp(2.1rem, 8vw, 3rem);
  white-space: nowrap;
  line-height: 1;
}

/* --- Dress-code section: remove top lace + color swatches, add a swipeable
   references carousel between this section and the organizer section. */
#rec2014374481 .tn-elem[data-elem-id="1773243872684000002"],
#rec2014374481 .tn-elem[data-elem-id="1773243895037000003"],
#rec2014374481 .tn-elem[data-elem-id="1773149906437"],
#rec2014374481 .tn-elem[data-elem-id="1773149032177"],
#rec2014374481 .tn-elem[data-elem-id="1773149045458"],
#rec2014374481 .tn-elem[data-elem-id="1773149055724"],
#rec2014374481 .tn-elem[data-elem-id="1773149067838"],
#rec2014374481 .tn-elem[data-elem-id="1773149133489"],
#rec2014374481 .tn-elem[data-elem-id="1773149205849"],
#rec2014374481 .tn-elem[data-elem-id="1773149214669"],
#rec2014374481 .tn-elem[data-elem-id="1773149222652"],
#rec2014374481 .tn-elem[data-elem-id="1773149229690"],
#rec2014374481 .tn-elem[data-elem-id="1773149240652"] {
  display: none !important;
}
.x-dresscode-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  line-height: 0;
  background: #e9e4d8;
}
.x-dresscode-carousel::-webkit-scrollbar {
  display: none;
}
.x-dresscode-carousel img {
  flex: 0 0 auto;
  height: clamp(260px, 46vh, 440px);
  width: auto;
  object-fit: cover;
  scroll-snap-align: start;
}
/* Swipe hint above the carousel so guests know the references scroll sideways. */
.x-carousel-hint {
  background: #e9e4d8;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9c8f7c;
  padding: 14px 0 12px;
}
.x-carousel-hint__arrow {
  display: inline-block;
  animation: x-swipe 1.3s ease-in-out infinite;
}
@keyframes x-swipe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(9px); }
}

/* --- "Пожелания" section (custom block inserted after the dress-code carousel,
   before Contacts). Cream like the light sections; Great Vibes heading; body in
   the site's JetBrains Mono; two icon links (gift box → Wishlist, flower →
   живые цветы). */
.x-wishes {
  background: #e9e4d8;
  color: #342619;
  text-align: center;
  padding: clamp(56px, 12vw, 88px) 24px clamp(60px, 13vw, 96px);
  font-family: "JetBrains Mono", monospace;
}
.x-wishes__title {
  font-family: "Denistina", "Martina", cursive;
  font-weight: 400;
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  line-height: 1;
  margin: 0 0 clamp(22px, 6vw, 34px);
}
.x-wishes__lead,
.x-wishes__text {
  max-width: 600px;
  margin: 0 auto;
  font-size: clamp(12.5px, 3.5vw, 15px);
  line-height: 1.75;
}
.x-wishes__lead { margin-bottom: 18px; }
.x-wishes__icons {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(48px, 16vw, 110px);
  margin-top: clamp(36px, 9vw, 56px);
}
.x-wishes__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #342619;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.x-wishes__icon:hover { transform: translateY(-3px); opacity: 0.85; }
.x-wishes__icon img { width: auto; object-fit: contain; }
.x-wishes__icon span {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* this section is outside Tilda's records, so force the link colour — otherwise
   the labels inherit a default coral link colour. */
.x-wishes a.x-wishes__icon,
.x-wishes a.x-wishes__icon span { color: #342619 !important; }

/* RSVP form (rec2015163221) — use the site body font (JetBrains Mono) instead of
   Tilda's default serifs (Cormorant for options/hint, Georgia for titles/button)
   so the form matches every section above it. */
#rec2015163221 * {
  font-family: "JetBrains Mono", monospace !important;
}

/* Countdown + heading + closing share ONE background = the envelope's own surface.
   The closing's rich brown is the surface photographed in envelope.png (warm #2c2016,
   not the cool flat #261d15 these sections shipped). bg-brown.png IS that surface,
   sampled from envelope.png with its directional shadow-lines removed, tiled at a
   FIXED size so it never upscales (no pixelation) and stays uniform (no seam lines).
   The countdown's .t-cover/__carrier/__filter also shipped a black bg+image. */
#rec2015139671 .t396__artboard,
#rec2015149221 .t-cover,
#rec2015149221 .t-cover__carrier,
#rec2015149221 .t-cover__filter,
#rec2015127231 .t396__artboard {
  background-color: #453526 !important;
  background-image: url(/images/bg-brown.png) !important;
  /* Seamless suede tile repeated at a FIXED px size: identical grain in every section,
     and it never upscales -> no pixelation on any device. Deliberately NOT
     background-attachment: fixed — iOS Safari scales fixed backgrounds to the full
     page height and blows the texture up into blocks (that was the phone pixelation).
     bg-brown.png is a toroidal (edge-wrapping) tile, so the repeat shows no seams. */
  background-size: 500px !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
  background-position: center top !important;
}
/* These sections ship low-opacity decorative paper-texture overlays whose horizontal
   paper features banded visibly against the grain (the heading's wide overlay also
   bled down over the countdown). The grain now supplies the texture, so hide them. */
#rec2015139671 .tn-elem[data-elem-id="1773161913801"],
#rec2015139671 .tn-elem[data-elem-id="1773245333051"],
#rec2015127231 .tn-elem[data-elem-id="1773162009153"],
#rec2015127231 .tn-elem[data-elem-id="1773245369863"] {
  display: none !important;
}
/* The envelope is now a cut-out (transparent background) resting on the shared suede
   fill. Its original contact shadow was removed with the old brown, so add a soft one
   back via drop-shadow (follows the torn deckle edge) — keeps it from looking pasted. */
#rec2015127231 .tn-elem[data-elem-id="1773155452082"] .tn-atom__img {
  filter: drop-shadow(0 9px 22px rgba(18, 11, 6, 0.5)) !important;
}

/* --- Details / gifts note (rec2014318861) ------------------------------- */
/* The note text (1773148133563) is the bride's message, which is longer than the
   template's, so on desktop it overran the white card onto the silver charger plate
   (its block is ~560px vs the card's ~525px writable width). Pad it in so it stays
   within the card, centered. Scoped to desktop — the phone already fits the card. */
@media (min-width: 960px) {
  #rec2014318861 .tn-elem[data-elem-id="1773148133563"] {
    box-sizing: border-box !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
/* The heart photo hung low enough that its lace point dropped into the note text (on
   both phone and desktop). Lift it so it reads as a pendant off the monogram and its
   point clears the text. Expressed as % of its own height, so it scales per breakpoint. */
#rec2014318861 .tn-elem[data-elem-id="1773147994809"] {
  transform: translateY(-24%) !important;
}
@media (min-width: 960px) {
  /* On desktop the heart is much larger and sits lower (its point lands below the
     whole text block), so it needs a bigger lift than the % gives. */
  #rec2014318861 .tn-elem[data-elem-id="1773147994809"] {
    transform: translateY(-150px) !important;
  }
}
.x-wishes__icon:nth-child(1) img { height: clamp(86px, 24vw, 116px); }  /* gift box (bold) */
.x-wishes__icon:nth-child(2) img { height: clamp(104px, 30vw, 148px); } /* flower (airy/tall) */

/* --- Location section: Усадьба «Тайны Рублёва» -------------------------- */
/* Old palace photo became the waiter illustration; hide the shadow-card that
   sat behind it. */
#rec2014173551 .tn-elem[data-elem-id="1773147066251"] {
  display: none !important;
}
/* Venue name (replaced the Villa Michetti SVG). Stretch the element across the
   artboard and center the text so the longer name doesn't clip off-screen. */
#rec2014173551 .tn-elem[data-elem-id="1773146979376"] {
  left: calc(50% - 600px + 496px) !important;
  width: 316px !important;
  text-align: center !important;
}
@media screen and (max-width: 1199px) {
  #rec2014173551 .tn-elem[data-elem-id="1773146979376"] {
    left: calc(50% - 480px + 382px) !important;
  }
}
@media screen and (max-width: 959px) {
  #rec2014173551 .tn-elem[data-elem-id="1773146979376"] {
    left: calc(50% - 320px + 209px) !important;
  }
}
@media screen and (max-width: 639px) {
  #rec2014173551 .tn-elem[data-elem-id="1773146979376"] {
    left: calc(50% - 240px + 129px) !important;
  }
}
@media screen and (max-width: 479px) {
  #rec2014173551 .tn-elem[data-elem-id="1773146979376"] {
    left: calc(50% - 160px + 54px) !important;
    width: 276px !important;
  }
}
#rec2014173551 .tn-elem[data-elem-id="1773146979376"] .tn-atom {
  overflow: visible !important;
  display: block !important;
  text-align: center !important;
}
.x-venue {
  font-family: "Denistina", "Martina", cursive;
  font-weight: 400;
  color: #342619;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  white-space: nowrap;
}

/* Welcome section: original order — "Welcome" script on top, invite card (text +
   date) below. Per the bride, nudge the whole block DOWN a bit; vh-based so it scales
   with the full-height hero. (The earlier order-swap was reverted.) */
#rec2013220411 .tn-elem[data-elem-id="1773143412339"],
#rec2013220411 .tn-elem[data-elem-id="1773143456088"],
#rec2013220411 .tn-elem[data-elem-id="1773143491346"],
#rec2013220411 .tn-elem[data-elem-id="1773143701662"] {
  transform: translateY(7vh) !important;
}

/* --- Entrance animations (restored from the Tilda export's .t-animate data) ------- */
/* The 70 .t-animate elements still carry Tilda's data-animate-style/duration/delay,
   but Tilda's animation engine wasn't ported, so they never appeared. Hide them at
   first paint here (no flash), then TildaRuntime sets each element's transition from
   the data attributes and adds .t-animate_started when it scrolls into view. Tilda's
   own CSS only animated >=980px and left mobile hidden — this works on every width. */
.t-animate[data-animate-style] {
  opacity: 0;
  backface-visibility: hidden;
}
.t-animate[data-animate-style="fadeinup"]    { transform: translateY(100px); }
.t-animate[data-animate-style="fadeindown"]  { transform: translateY(-100px); }
.t-animate[data-animate-style="fadeinleft"]  { transform: translateX(100px); }
.t-animate[data-animate-style="fadeinright"] { transform: translateX(-100px); }
.t-animate[data-animate-style="zoomin"]      { transform: scale(0.9); }
.t-animate[data-animate-style="zoomout"]     { transform: scale(1.2); }
.t-animate.t-animate_started {
  opacity: 1 !important;
  transform: none !important;
}