:root {
  --cream: #fbf4e1;
  --cream-light: #fdf9ee;
  --ink: #5d5650;
  --ink-soft: #8a827a;
  --pink: #f07fae;
  --pink-deep: #e0528d;
  --pink-soft: #ffd6e5;
  --green: #5fb86a;
  --green-deep: #3f8f55;
  --green-soft: #d4f0d6;
  --paper: #f3f1ec;
  --tape-green: #8fd18a;
  --tape-pink: #f29ac2;
  --tape-beige: rgba(222, 205, 170, 0.85);

  --font-serif: 'Cormorant Infant', Georgia, serif;
  --font-script: 'Marck Script', cursive;
  --font-names: 'Pacifico', 'Marck Script', cursive;
  --font-hand: 'Pangolin', 'Comic Sans MS', cursive;

  --column: min(740px, 100%);
  --text-column: min(420px, calc(100% - 32px));
  --space-section: clamp(56px, 10vw, 96px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  overflow-x: hidden;
}
p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Кнопка музыки ---------- */
.music-btn {
  position: fixed; left: 20px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 5px;
  border: 2.5px solid #4b3838; border-radius: 30px; cursor: pointer;
  background: #fffefa; color: #4b3838;
  box-shadow: 0 8px 18px -8px rgba(110, 70, 60, 0.45);
  transition: padding 300ms var(--ease-out), gap 300ms var(--ease-out);
}
.music-btn:focus-visible { outline: 3px solid #ff8fb8; outline-offset: 3px; }
.music-btn__disc {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #ffd0e1; color: #e0528d;
}
.music-btn .ui-icon { width: 22px; height: 22px; }
.music-btn__label { padding-right: 10px; font-size: 16px; white-space: nowrap; }
.music-btn.is-playing { gap: 0; }
.music-btn.is-playing .music-btn__label { display: none; }
.music-btn.is-playing .music-btn__disc { animation: disc-spin 3.5s linear infinite; background: #d4f0d6; color: #3f8f55; }
.music-btn.is-playing::after {
  content: ''; position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: #7ccf5a; border: 2px solid #fffefa; animation: pulse 1.6s ease-in-out infinite;
}
.music-btn.shake { animation: shake 0.4s; }
@keyframes disc-spin { to { rotate: 360deg; } }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* ---------- Общие ---------- */
.page { width: var(--column); margin: 0 auto; }
.section {
  padding: var(--space-section) 16px 0;
  text-align: center;
}
.section > p { width: var(--text-column); margin-left: auto; margin-right: auto; }
.caps-title {
  margin: 0 0 18px; font-weight: 400; font-size: 30px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.caps-title--light { color: #fff; }
.script-title {
  margin: 0 0 22px; font-family: var(--font-script); font-weight: 400;
  font-size: clamp(40px, 9vw, 54px); line-height: 1.05;
}
.script-title--sm { font-size: clamp(30px, 7vw, 40px); }
.script { font-family: var(--font-script); font-size: 34px; }
.time { font-size: 24px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none !important; }
  .rainbow-text span { animation: none !important; }
}

/* ---------- Фото (с заглушкой, пока нет файла) ---------- */
.photo { position: relative; overflow: hidden; background: #ece3cf; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--empty img { display: none; }
.photo--empty::after {
  content: 'Здесь будет фото';
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-hand); font-size: 16px; color: var(--ink-soft);
  background: repeating-linear-gradient(45deg, #efe6d2 0 12px, #f6efdf 12px 24px);
}

/* ---------- 1. Обложка ---------- */
.hero { position: relative; padding: 18px 16px 24px; text-align: center; }
.bunting { display: block; width: min(360px, 90%); margin: 0 auto; }
.bunting--wide { width: min(520px, 100%); margin-bottom: 40px; }
/* ---------- Стикеры ---------- */
.sticker-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sticker-svg {
  position: absolute; width: var(--s); height: var(--s);
  translate: -50% -50%; rotate: var(--r);
  overflow: visible;
  filter: drop-shadow(0 3px 2px rgba(110, 70, 60, 0.18));
}
.sticker-svg--float { animation: sticker-float 5s ease-in-out var(--d) infinite; }
.sticker-svg--twinkle { animation: sticker-twinkle 2.6s ease-in-out var(--d) infinite; }
@keyframes sticker-float { 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes sticker-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.72) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .sticker-svg { animation: none !important; } }
@media (max-width: 560px) { .sticker-svg--desktop { display: none; } .hero .sticker-svg, .couple-block .sticker-svg { width: calc(var(--s) * 0.92); height: calc(var(--s) * 0.92); } }

.washi {
  position: absolute; z-index: 3; width: 92px; height: 26px; opacity: 0.92;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.washi--pink { background: repeating-linear-gradient(-45deg, #ff8fb8 0 8px, #ffd0e1 8px 16px); }
.washi--green { background: repeating-linear-gradient(-45deg, #7cc77f 0 8px, #d9f2d8 8px 16px); }
.washi--left { left: -22px; bottom: 18px; transform: rotate(38deg); }
.washi--right { right: -22px; top: 12px; transform: rotate(36deg); }
.washi--top { left: 50%; top: -12px; transform: translateX(-50%) rotate(-4deg); }

.hero__title { position: relative; z-index: 3; margin: -6px 0 14px; font-family: var(--font-hand); font-weight: 400; line-height: 1; }
.rainbow-text { display: block; font-size: 44px; transform: rotate(-8deg); }
.rainbow-text--big { font-size: clamp(48px, 12vw, 70px); }
.rainbow-text span { display: inline-block; animation: bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes bob { 50% { transform: translateY(-5px); } }

.hero__photo {
  position: relative; z-index: 1;
  width: min(390px, 80%); aspect-ratio: 4 / 4.3; margin: 0 auto;
  border-radius: 48% 48% 18px 18px;
  border: 9px solid #fff;
  box-shadow: 0 18px 34px -12px rgba(150, 80, 90, 0.35);
}
.name-card {
  position: relative; z-index: 3; width: min(350px, 90%); margin: -52px auto 30px;
  padding: 24px 18px 18px; text-align: center;
  background: #fff; border-radius: 22px; rotate: -2deg;
  box-shadow: 0 2px 0 #f6dbe5, 0 18px 30px -14px rgba(160, 70, 100, 0.4);
}
.name-card::before {
  content: ''; position: absolute; inset: 8px; border-radius: 15px; pointer-events: none;
  border: 2px dashed var(--pink); opacity: 0.55;
}
.name-card__names {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-family: var(--font-names); font-size: clamp(31px, 9vw, 42px); line-height: 1.3;
}
.name-card__groom { color: var(--green-deep); }
.name-card__bride { color: var(--pink-deep); }
.names-heart { flex: none; width: 0.85em; height: 0.85em; color: #ff6fa5; margin-top: 0.15em; }
.name-card__date {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0;
  font-family: var(--font-hand); font-size: 17px; letter-spacing: 0.18em; color: #8c6a74;
}
.name-card__date::before, .name-card__date::after { content: ''; width: 34px; height: 2px; border-radius: 2px; background: var(--green); opacity: 0.7; }
.tape { position: absolute; width: 80px; height: 26px; }
.tape--green { top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--tape-green); opacity: 0.85; }
.tape--pink { top: -12px; left: 50%; transform: translateX(-50%) rotate(4deg); background: var(--tape-pink); opacity: 0.85; }

.countdown { position: relative; z-index: 3; display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 16px); }
.countdown > div {
  display: grid; place-items: center; align-content: center;
  width: clamp(58px, 15vw, 76px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bubble); border: 2.5px solid #4b3838;
  box-shadow: 0 6px 12px -6px rgba(110, 70, 60, 0.35);
}
.countdown > div:nth-child(1) { --bubble: var(--pink-soft); rotate: -4deg; }
.countdown > div:nth-child(2) { --bubble: var(--green-soft); rotate: 3deg; }
.countdown > div:nth-child(3) { --bubble: var(--pink-soft); rotate: -2deg; }
.countdown > div:nth-child(4) { --bubble: var(--green-soft); rotate: 4deg; }
.countdown > div:nth-child(5) { --bubble: var(--pink-soft); rotate: -3deg; }
.countdown b { display: block; font-family: var(--font-hand); font-size: clamp(24px, 6vw, 32px); font-weight: 400; line-height: 1; color: #4b3838; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 12px; line-height: 1.1; color: #6b5550; }
.scroll-down {
  position: fixed; right: 24px; bottom: 24px; z-index: 10;
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: #fbf4ea; color: var(--ink); text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ---------- 2. Приветствие ---------- */
/* Наклейка с руками: на телефоне тянется от края до края экрана */
.hands-sticker {
  display: block; width: min(100vw, 760px); max-width: none; height: auto;
  margin: 34px 0 0 50%; translate: -50% 0;
  filter: drop-shadow(0 8px 10px rgba(150, 80, 90, 0.16));
}

/* ---------- 3. Цитата + пара ---------- */
.band { margin-top: var(--space-section); padding: 64px 16px; text-align: center; }
.couple-block {
  position: relative; margin-top: var(--space-section);
  padding: 84px 20px 92px; text-align: center;
  background-color: #ffe0ec;
  background-image: radial-gradient(#fff 2.6px, transparent 3.2px), radial-gradient(#ffc6dc 2px, transparent 2.6px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  -webkit-mask: radial-gradient(18px at 50% 0, #0000 97%, #000) 50% 0 / 44px 51% repeat-x,
                radial-gradient(18px at 50% 100%, #0000 97%, #000) 50% 100% / 44px 51% repeat-x;
          mask: radial-gradient(18px at 50% 0, #0000 97%, #000) 50% 0 / 44px 51% repeat-x,
                radial-gradient(18px at 50% 100%, #0000 97%, #000) 50% 100% / 44px 51% repeat-x;
}
.couple-quote {
  position: relative; z-index: 3; margin: 0 auto;
  font-family: var(--font-script); font-size: clamp(32px, 7.4vw, 46px); line-height: 1.12;
  color: #6e3b52; text-wrap: balance;
}
.couple-squiggle { display: block; width: 150px; height: 26px; margin: 8px auto 0; color: var(--green); }
.couple { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; margin-top: 46px; }
.polaroid-card {
  position: relative; margin: 0; width: min(44%, 220px); padding: 10px 10px 4px;
  background: #fff; border-radius: 4px;
  box-shadow: 0 16px 28px -14px rgba(120, 50, 70, 0.45), 0 2px 4px rgba(120, 50, 70, 0.08);
  transition: rotate 400ms var(--ease-out), translate 400ms var(--ease-out), opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.polaroid-card--groom { rotate: -6deg; }
.polaroid-card--bride { rotate: 5deg; margin-top: 26px; }
.polaroid-card.is-visible:hover { rotate: 0deg; translate: 0 -6px; }
.polaroid-card .photo { aspect-ratio: 1; border-radius: 2px; }
.polaroid-card figcaption { padding: 6px 0 4px; font-family: var(--font-names); font-size: clamp(22px, 5.6vw, 30px); line-height: 1.4; }
.polaroid-card--groom figcaption { color: var(--green-deep); }
.polaroid-card--bride figcaption { color: var(--pink-deep); }
.polaroid-card__crown {
  position: absolute; z-index: 4; top: -44px; width: 64px; height: 64px;
  filter: drop-shadow(0 3px 2px rgba(110, 70, 60, 0.2));
}
.polaroid-card--groom .polaroid-card__crown { left: -14px; rotate: -18deg; color: #ffc93c; }
.polaroid-card--bride .polaroid-card__crown { right: -14px; rotate: 16deg; color: #ff9cc2; }
.couple-heart {
  position: relative; z-index: 5; flex: none; align-self: center;
  width: 54px; height: 54px; margin: 0 -22px; color: #ff4f8b;
  animation: heartbeat 1.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 3px rgba(120, 50, 70, 0.25));
}

/* ---------- 4. Локация (скрапбук) ---------- */
.scrapbook { position: relative; width: min(360px, 92%); height: 220px; margin: 30px auto 0; }
.lined-note {
  position: absolute; left: 0; top: 30px; width: 58%; padding: 22px 12px 14px;
  font-size: 16px; line-height: 1.6; transform: rotate(-6deg);
  background: repeating-linear-gradient(#f7f6f2 0 25px, #f2d3df 25px 26px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.lined-note p { margin: 0; }
.polaroid {
  position: absolute; right: 0; top: 0; width: 44%; padding: 8px 8px 30px;
  background: #fff; transform: rotate(7deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.polaroid .photo { aspect-ratio: 1; }

/* ---------- 5. Меню ---------- */
.cake { position: relative; width: 200px; height: 200px; margin: 26px auto 0; }
.cake__art { width: 100%; height: 100%; filter: drop-shadow(0 10px 10px rgba(120, 80, 60, 0.18)); }

/* ---------- 6. Подарки ---------- */
.band--pink { padding: 0 16px; }
.pennant {
  width: min(500px, 100%); margin: 0 auto; padding: 48px 30px 120px;
  position: relative; isolation: isolate; color: #fff;
  background: var(--pink-deep);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}
.pennant p { width: var(--text-column); margin-left: auto; margin-right: auto; }

/* ---------- 7. Бегущая строка ---------- */
.marquee-block { position: relative; margin-top: 56px; padding: 110px 0; overflow-x: clip; }
.marquee {
  white-space: nowrap; font-family: var(--font-hand); font-size: 26px;
  color: var(--pink-deep); line-height: 2;
}
.marquee span { display: inline-block; animation: marquee 18s linear infinite; }
.marquee--reverse span { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Вырезанная пара поверх бегущих строк */
.marquee-block__couple {
  position: absolute; left: 50%; top: 50%; width: auto; height: 360px; max-width: none;
  translate: -50% -50%; rotate: -3deg;
  filter: drop-shadow(0 10px 14px rgba(150, 80, 90, 0.2));
}

/* ---------- 8. Примечание ---------- */
.doodle-frame {
  position: relative; width: min(440px, 100%); margin: 0 auto; padding: 64px 52px 70px;
  background-color: #fffefa;
  background-image: linear-gradient(#e1f0df 1px, transparent 1px), linear-gradient(90deg, #e1f0df 1px, transparent 1px);
  background-size: 20px 20px; background-position: -1px -1px;
  border-radius: 8px; rotate: -1.2deg;
  box-shadow: 0 2px 0 #efe6d4, 0 22px 40px -18px rgba(120, 80, 60, 0.4);
}
.doodle-frame .caps-title { color: #e0528d; }
.doodle-frame p { position: relative; z-index: 3; font-size: 19px; }
.doodle-frame .sticker-layer { inset: 6px; }

/* ---------- 9. Календарь ---------- */
.calendar {
  width: min(320px, 92%); margin: 24px auto 0; padding: 18px 16px 22px;
  border: 3px solid var(--pink); border-radius: 26px; color: var(--pink-deep);
}
.calendar__month { font-family: var(--font-script); font-size: 36px; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; margin-top: 8px; }
.calendar__wd { font-size: 12px; opacity: 0.7; }
.calendar__day { position: relative; display: grid; place-items: center; height: 34px; font-size: 20px; }
.calendar__day--active { color: #fff; z-index: 0; }
.calendar__day--active::before {
  content: '♥'; position: absolute; z-index: -1; font-size: 50px; line-height: 1;
  color: var(--pink-deep); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.12); } }

/* ---------- 10. Дресс-код ---------- */
.palette { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.palette__swatch {
  width: 54px; height: 54px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 200ms var(--ease-out);
}
.palette__swatch:hover { transform: translateY(-4px) scale(1.06); }

/* ---------- 11. Фото ---------- */
.photo--wavy {
  width: min(380px, 100%); aspect-ratio: 450 / 255; margin: 26px auto 0;
  -webkit-mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% 0 / 40px 51% repeat-x,
                radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% 100% / 40px 51% repeat-x;
          mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% 0 / 40px 51% repeat-x,
                radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% 100% / 40px 51% repeat-x;
}

/* ---------- 12. Финал ---------- */
.section--final { padding-bottom: var(--space-section); }
.btn-confirm {
  display: block; width: min(300px, 100%); margin: 8px auto 16px; padding: 12px 20px;
  border: 0; border-radius: 30px; cursor: pointer; color: #fff; font-size: 20px;
  background: linear-gradient(#f39cbf, var(--pink-deep));
  box-shadow: 0 4px 0 #c9578a, 0 8px 18px rgba(224, 101, 155, 0.35);
  transition: transform 150ms, box-shadow 150ms;
}
.btn-confirm:hover { transform: translateY(-2px); }
.btn-confirm:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9578a; }
.btn-confirm:disabled { opacity: 0.6; cursor: wait; }
.ui-icon { width: 26px; height: 26px; vertical-align: -0.2em; }
.btn-confirm .ui-icon, .link-btn .ui-icon { width: 1.1em; height: 1.1em; }
.link-btn { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--ink-soft); text-decoration: underline; }

/* ---------- 13. Расписание ---------- */
.schedule {
  position: relative; margin: 0 calc(50% - 50vw); padding: var(--space-section) 16px;
  background: var(--cream-light); text-align: center;
}
.timeline { position: relative; width: min(560px, 100%); margin: 30px auto 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 30px; width: 2px;
  background: repeating-linear-gradient(#7a7068 0 6px, transparent 6px 10px);
}
.timeline__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 170px; }
.timeline__text { padding: 0 22px; }
.timeline__time { font-size: 30px; font-weight: 700; }
.timeline__title { font-family: var(--font-script); font-size: 24px; }
.timeline__text p { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }
.timeline__icon { display: grid; place-items: center; }
.timeline__icon svg { width: 84px; height: 84px; filter: drop-shadow(0 6px 6px rgba(120, 80, 60, 0.16)); }
.timeline__dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #7a7068; }
.timeline__item--left .timeline__text { grid-column: 1; text-align: right; }
.timeline__item--left .timeline__icon { grid-column: 2; grid-row: 1; }
.timeline__item--right .timeline__text { grid-column: 2; text-align: left; }
.timeline__item--right .timeline__icon { grid-column: 1; grid-row: 1; }
.timeline__end { position: relative; color: #f06b9c; font-size: 24px; }

/* ---------- 14. Карта и подвал ---------- */
.map { margin: 0 calc(50% - 50vw); background: #e8e4da; text-align: center; }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }
.footer { padding: 28px 16px; text-align: center; font-family: var(--font-names); font-size: 22px; color: var(--pink-deep); }

/* ---------- Модалка ---------- */
.modal {
  width: min(440px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0;
  border: 0; border-radius: 20px; background: var(--cream-light); color: var(--ink);
}
.modal::backdrop { background: rgba(60, 40, 40, 0.4); }
.modal__form { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; }
.modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 20px; cursor: pointer; }
.modal__note { margin: 0; font-size: 15px; line-height: 1.35; text-align: center; color: var(--ink-soft); }
.children-fields { display: flex; flex-direction: column; gap: 14px; }
.children-fields[hidden] { display: none; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.modal input:not([type=radio]):not([type=checkbox]), .modal textarea {
  padding: 9px 12px; border: 1px solid #dccfb6; border-radius: 10px; background: #fff;
  font: inherit; font-size: 17px; color: var(--ink);
}
.modal input:focus-visible, .modal textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.modal fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.modal legend { font-size: 17px; margin-bottom: 4px; }
.modal .choice { flex-direction: row; align-items: center; gap: 8px; }
.modal .choice input { accent-color: var(--pink-deep); width: 18px; height: 18px; }
.modal .btn-confirm { margin-bottom: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.4em; margin: 0; text-align: center; color: var(--pink-deep); }

/* ---------- Мобильные ---------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .music-btn { left: 14px; bottom: 14px; }
  .doodle-frame { padding: 58px 36px 64px; }
  .doodle-frame p { font-size: 17px; }
  .polaroid-card__crown { width: 50px; height: 50px; top: -34px; }
  .couple-heart { width: 44px; height: 44px; margin: 0 -18px; }
  .scroll-down { width: 46px; height: 46px; right: 14px; bottom: 14px; }
  .timeline__icon svg { width: 60px; height: 60px; }
  .timeline__time { font-size: 24px; }
  .timeline__text { padding: 0 14px; }
}

/* ---------- Рисованный стиль (фломастер) ---------- */
:root { --font-marker: 'Caveat', 'Pangolin', cursive; }
.bunting { height: auto; overflow: visible; }
.hero__title { font-family: var(--font-marker); font-weight: 700; }
.rainbow-text { font-size: 50px; letter-spacing: 0.02em; }
.rainbow-text--big { font-size: clamp(60px, 15vw, 86px); line-height: 0.9; }
.rainbow-text span { filter: url(#crayon); }
.rainbow-text span:nth-child(odd) { rotate: -4deg; }
.rainbow-text span:nth-child(3n) { rotate: 5deg; translate: 0 -3px; }
.title-underline {
  display: block; width: min(260px, 70%); height: 26px; margin: -10px auto 0;
  rotate: -8deg; translate: 18px 0; overflow: visible;
}
.countdown > div.is-drawn {
  position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none;
}
.countdown__blob { position: absolute; inset: -5px; z-index: -1; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; }
.countdown b { font-family: var(--font-marker); font-weight: 700; font-size: clamp(30px, 7.4vw, 38px); }
.countdown small { font-family: var(--font-marker); font-size: 15px; font-weight: 600; }
.timeline__icon svg, .cake__art { filter: url(#crayon) drop-shadow(0 6px 6px rgba(120, 80, 60, 0.14)); }
.sticker-svg, .names-heart, .couple-heart, .polaroid-card__crown, .couple-squiggle { overflow: visible; }

/* ---------- Рисованные рамки ---------- */
.drawn-frame {
  position: absolute; z-index: 4; pointer-events: none; overflow: visible;
  inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px);
}
.photo.is-framed { overflow: visible; }
.photo.is-framed img, .photo.is-framed.photo--empty::after { border-radius: inherit; }
.hero__photo.is-framed img, .hero__photo.is-framed.photo--empty::after { border-radius: 46% 46% 12px 12px / 44% 44% 12px 12px; }
.photo--wavy.is-framed { -webkit-mask: none; mask: none; background: none; }
.photo--wavy.is-framed img, .photo--wavy.is-framed.photo--empty::after {
  -webkit-mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% 0 / 40px 51% repeat-x,
                radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% 100% / 40px 51% repeat-x;
          mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% 0 / 40px 51% repeat-x,
                radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% 100% / 40px 51% repeat-x;
}
.photo--wavy.is-framed .drawn-frame { inset: -12px -12px; }
/* Вымпел подарков: рисованный фон вместо ровной заливки */
.pennant.is-framed { background: none; clip-path: none; }
.pennant .drawn-frame { z-index: -1; }
.pennant h2, .pennant p { text-shadow: 0 1px 2px rgba(150, 30, 80, 0.35); }

/* ---------- Маленькие рисунки по секциям ---------- */
.section, .band--pink, .schedule { position: relative; }
.sticker-layer--tiny { z-index: 0; }
.sticker-layer--tiny ~ * { position: relative; z-index: 1; }
.sticker-layer--tiny .sticker-svg { filter: none; opacity: 0.9; }

/* ---------- Скотч: светлый и полупрозрачный ---------- */
.washi {
  width: 70px; height: 20px; opacity: 0.78; box-shadow: none;
  mix-blend-mode: multiply;
  -webkit-mask: none; mask: none;
  border-radius: 2px;
}
.washi--pink { background: repeating-linear-gradient(-45deg, #f7cfdd 0 7px, #fbe1ea 7px 14px); }
.washi--green { background: repeating-linear-gradient(-45deg, #cfe9cb 0 7px, #e3f3e0 7px 14px); }
.washi--left { left: -16px; bottom: 14px; }
.washi--right { right: -16px; top: 10px; }