/* A quiet paper frame for Sveta's birthday film. */
.birthday-section {
  position: relative;
  overflow: hidden;
  background: var(--paper-light, #fcfaf5);
  border-top: 1px solid #e4d9c8;
}
.birthday-section .shell { position: relative; }
.birthday-heading .eyebrow { color: #8b8270; }
.birthday-heading h2 em { color: var(--rose, #b8756d); }
.birthday-heading p {
  max-width: 420px;
  margin-inline: auto;
  color: #8d7e70;
  line-height: 1.85;
}
.birthday-film {
  position: relative;
  max-width: 924px;
  margin: 46px auto 0;
  padding: 13px 13px 0;
  border: 1px solid #e3d9c9;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 16px 35px #69513a14, 0 2px 5px #69513a0a;
}
.birthday-film::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  width: 107px;
  height: 26px;
  background: #b7bea25c;
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(2% 0, 100% 5%, 98% 100%, 0 96%);
  pointer-events: none;
}
.birthday-film video,
.birthday-film > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  background: #f5eddf;
  object-fit: contain;
}
.birthday-caption {
  padding: 16px 12px 18px;
  color: #9a806b;
  font-family: var(--serif, Georgia, serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}
.birthday-star {
  position: absolute;
  color: #a89776;
  font-family: var(--serif, Georgia, serif);
  font-size: 31px;
  line-height: 1;
  pointer-events: none;
}
.birthday-star--left { top: 50px; left: 8%; transform: rotate(-12deg); }
.birthday-star--right { top: 136px; right: 8%; font-size: 21px; color: #b99177; }
.birthday-star--bottom { bottom: -29px; right: 13%; font-size: 16px; color: #8b977a; }
@media (max-width: 820px) {
  .birthday-film { margin-top: 39px; padding: 11px 11px 0; }
  .birthday-caption { font-size: 16px; padding-block: 15px 17px; }
  .birthday-star--left { left: 3%; top: 65px; font-size: 25px; }
  .birthday-star--right { right: 2%; top: 119px; font-size: 18px; }
}
@media (max-width: 600px) {
  .birthday-heading p { max-width: 270px; }
  .birthday-film { margin-top: 34px; padding: 7px 7px 0; border-radius: 4px; }
  .birthday-film::before { width: 79px; height: 21px; top: -10px; }
  .birthday-caption { padding: 13px 6px 14px; font-size: 14px; }
  .birthday-star--left { left: 0; top: 82px; font-size: 19px; }
  .birthday-star--right { right: 0; top: 133px; font-size: 14px; }
  .birthday-star--bottom { bottom: -25px; right: 10%; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-section *,
  .birthday-section *::before,
  .birthday-section *::after { animation: none !important; transition: none !important; }
}

/* birthday-youtube:v1 */
.birthday-youtube { position:relative; width:100%; aspect-ratio:16/9; min-height:200px; }
.birthday-youtube iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:2px; }
.birthday-youtube iframe[hidden] { display:none; }
.birthday-youtube-play { position:absolute; inset:0; width:100%; border:0; border-radius:2px; cursor:pointer; display:grid; place-items:center; background:#f5eddf url("assets/birthday-sveta-poster.svg") center/cover; }
.birthday-youtube-play span { padding:14px 21px; border:1px solid #c7b597; border-radius:999px; background:#fffdf2ed; color:#594437; font:600 16px Georgia,serif; box-shadow:0 3px 16px #0002; }
.birthday-youtube-play:focus-visible { outline:3px solid #8b977a; outline-offset:3px; }
.birthday-youtube-play[hidden] { display:none; }