.fairytale {
  --ft-bg: #fbf1f7;
  --ft-paper: #fff7fb;
  --ft-ink: #64415d;
  --ft-muted: #805f7c;
  --ft-pink: #edb6d3;
  --ft-mauve: #a877a0;
  --ft-line: #a877a04a;
  --ft-script: 'Great Vibes', Georgia, serif;
  margin: 0;
  background: var(--ft-bg);
  color: var(--ft-ink);
  font: 17px/1.65 'Cormorant Garamond', Georgia, serif;
}
.fairytale *, .fairytale *::before, .fairytale *::after { box-sizing: border-box }
.fairytale [hidden], .ft-gate:not([open]) { display: none !important }
.fairytale a { color: inherit }
.fairytale button { cursor: pointer }
.fairytale :focus-visible { outline: 2px solid #9c6a99; outline-offset: 4px }
html.ft-locked { overflow: hidden }
.ft-gate {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; color: white;
  background: #3c2545 url('castle/door-poster.jpg') center/cover no-repeat;
  opacity: 1; transition: opacity .8s ease;
}
.ft-gate::backdrop { background: transparent }
.ft-gate.fade { opacity: 0 }
.ft-gate video, .ft-hero video, .ft-shade, .ft-white {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ft-gate video { opacity: 0; transition: opacity .25s }
.ft-gate.playing video { opacity: 1 }
#ft-open {
  position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 20px 20px max(64px, 7svh);
  display: flex; align-items: flex-end; justify-content: center;
  color: white; background: linear-gradient(180deg,#28113712,#28113726 46%,#28113794);
  transition: opacity .45s;
}
.ft-gate.started #ft-open { opacity: 0; pointer-events: none }
.ft-glass {
  position: relative; width: min(338px,100%); padding: 18px 20px 22px;
  border: 1px solid #f0bee1c9; border-radius: 21px; display: grid; gap: 6px;
  backdrop-filter: blur(12px); background: linear-gradient(#ffffff26,#ffffff0e),#32193c57;
  box-shadow: 0 20px 42px #3c143c60; text-shadow: 0 2px 14px #321438b0;
  animation: ft-float 2.8s ease-in-out infinite;
}
.ft-glass::before { content: ""; position: absolute; inset: 6px; border: 1px solid #ffffff32; border-radius: 15px; pointer-events: none }
.ft-glass small { color: #f9deee; font: 13px/1.4 system-ui,sans-serif }
.ft-glass strong { font: 400 clamp(32px,6vw,43px)/1.16 var(--ft-script) }
.ft-glass em { font-size: 17px; color: #ffedf8 }
.ft-progress { display: block; height: 4px; margin: 9px auto 0; width: 75%; background: linear-gradient(90deg,#efb9d6,#fff); border-radius: 99px }
.ft-white { z-index: 3; opacity: 0; pointer-events: none; background: #fff7fd; transition: opacity .45s }
.ft-gate.glow .ft-white { opacity: 1 }
.ft-skip { position: absolute; z-index: 4; right: 14px; bottom: max(12px,env(safe-area-inset-bottom)); color: white; background: #432a49ae; border: 1px solid #fff6; border-radius: 24px; padding: 6px 14px; font: 12px/1.6 system-ui,sans-serif }
@keyframes ft-float { 50% { transform: translateY(-4px) } }
.ft-hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: #efd9ec url('castle/hero-poster.jpg') center/cover no-repeat;
}
.ft-shade { background: linear-gradient(#46234670,#4623461c 28%,#46234636 67%,#fbf1f7); pointer-events: none }
.ft-hero-copy { position: relative; min-height: 100svh; padding: 52px 20px 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: white; text-shadow: 0 2px 18px #462346af }
.ft-hero-copy p { margin: 5px 0 }
.ft-hero h1 { font: 400 clamp(54px,10vw,100px)/1.05 var(--ft-script); margin: 7px 0 0; text-wrap: balance }
.ft-hero .ft-eyebrow { font: 600 13px/1.5 system-ui,sans-serif; color: #ffedf9 }
.ft-hero .ft-turns { font: 400 clamp(36px,7vw,62px)/1.1 var(--ft-script); color: #ffe7f6; margin: 6px 0 15px }
.ft-caption { font: 400 30px/1.3 var(--ft-script) }
.ft-scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); text-decoration: none; white-space: nowrap; font: 600 12px/1.4 system-ui,sans-serif }
.ft-scroll span { display: block; font-size: 23px; animation: ft-float 1.8s infinite }
.ft-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px auto; color: var(--ft-pink); font-size: 12px; min-height: 20px }
.ft-divider span { height: 1px; width: 60px; background: linear-gradient(90deg,transparent,var(--ft-line)) }
.ft-divider span:last-child { transform: rotate(180deg) }
.ft-hero .ft-divider { width: min(256px,76vw); color: #ffecf8 }
.ft-hero .ft-divider span { flex: 1; background: #ffecf886 }
.ft-paper { position: relative; max-width: 528px; margin: 0 auto; padding: 36px 24px 24px; background: linear-gradient(var(--ft-paper),var(--ft-bg)) }
.ft-paper::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--ft-line); border-radius: 6px; pointer-events: none }
.ft-section { position: relative; text-align: center; padding: 28px 8px }
.ft-section h2 { font: 400 33px/1.2 var(--ft-script); color: #95658e; margin: 0 0 16px }
.ft-section h2::after { content: ""; display: block; width: 46px; height: 1px; margin: 9px auto 0; background: linear-gradient(90deg,transparent,var(--ft-pink),transparent) }
.ft-section p { margin: 0 auto 8px; color: var(--ft-muted) }
.ft-verse span,.ft-gallery>span { color: var(--ft-pink); font-size: 23px }
.ft-verse p { font: 400 24px/1.45 var(--ft-script); color: var(--ft-ink); margin: 12px auto 0 }
.ft-hosts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px }
.ft-hosts small { display: block; color: var(--ft-muted) }
.ft-hosts strong { display: block; font-size: 19px; font-weight: 600 }
.ft-hosts>span { color: var(--ft-pink) }
.ft-count { display: grid; grid-template-columns: repeat(4,minmax(0,62px)); justify-content: center; gap: 8px }
.ft-count div { padding: 12px 2px; background: linear-gradient(white,var(--ft-paper)); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: 0 6px 18px #a877a023 }
.ft-count b { display: block; color: #95658e; font-size: 26px; line-height: 1 }
.ft-count small { display: block; margin-top: 5px; color: var(--ft-muted); font: 11px/1.4 system-ui,sans-serif }
.ft-timeline,.ft-notes { list-style: none; max-width: 355px; padding: 0; margin: 0 auto; text-align: left }
.ft-timeline li { display: grid; grid-template-columns: 10px 68px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--ft-line) }
.ft-timeline li>span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-pink); box-shadow: 0 0 0 4px #efb9d633 }
.ft-timeline time { color: #95658e; font-weight: 700; white-space: nowrap }
.ft-notes li { margin: 8px 0 }
.ft-notes li::before { content: "✦"; margin-right: 9px; color: var(--ft-mauve) }
.ft-map { display: block; width: 100%; height: 168px; border: 1px solid var(--ft-line); border-radius: 14px; margin: 0 0 14px; background: #f7d9e8 }
.ft-section h3 { margin: 0; color: #95658e }
.ft-pill,.fairytale .cl-gold-button { display: inline-block; border: 0; border-radius: 28px; padding: 9px 23px; color: white; background: linear-gradient(135deg,#a46a9c,#8d60c7); font: 600 13px/1.5 system-ui,sans-serif; text-decoration: none }
.ft-gallery { max-width: 484px; margin: 16px auto 0; padding-inline: 16px }
.ft-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px }
.ft-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid #fff9f0; border-radius: 16px; box-shadow: 0 12px 24px #5c37533b }
.ft-calendar { width: min(255px,100%); border: 1px solid var(--ft-line); border-radius: 22px; overflow: hidden; margin: 0 auto; background: var(--ft-paper); box-shadow: 0 15px 35px #6a47631f }
.ft-month { background: linear-gradient(115deg,#a877a0,#8757ea); color: white; padding: 13px 7px; font: 600 14px/1.4 system-ui,sans-serif }
.ft-calendar p { margin: 12px auto }
.ft-calendar>strong { display: block; color: #a877a0; font-size: 56px; line-height: 1 }
.ft-cal-actions { display: flex; gap: 6px; justify-content: center; border-top: 1px dashed var(--ft-line); padding: 12px 5px }
.ft-cal-actions a,.ft-cal-actions button,.ft-footer button { border: 1px solid var(--ft-line); border-radius: 20px; padding: 7px 9px; text-decoration: none; font: 12px/1.4 system-ui,sans-serif; color: #80527c; background: transparent }
.ft-rsvp { margin: 48px auto; width: min(436px,calc(100% - 28px)); padding: 24px 18px; border: 1px solid var(--ft-line); border-radius: 24px; background: var(--ft-paper); box-shadow: 0 16px 38px #6a476325 }
.fairytale .cl-form { width: 100%; max-width: none; padding: 0; margin: 20px 0 0; background: none; color: var(--ft-ink); text-align: left }
.fairytale .cl-form label,.fairytale .cl-form legend { color: var(--ft-ink); font: 600 16px/1.4 'Cormorant Garamond',Georgia,serif; letter-spacing: 0; text-transform: none }
.fairytale .cl-form input:not([type=radio]):not([type=hidden]),.fairytale .cl-form textarea { background: #fff; color: var(--ft-ink); border: 1px solid var(--ft-line); border-radius: 10px; font-size: 16px }
.fairytale .cl-attendance-choice span,.fairytale .cl-stepper { background: #fff; color: var(--ft-ink); border-color: var(--ft-line) }
.fairytale .cl-attendance-choice input:checked+span { color: var(--ft-ink); background: #f5e2f0; border-color: #a877a0 }
.fairytale .cl-stepper button { color: var(--ft-ink) }
.fairytale .cl-stepper input { border: 0!important }
.fairytale .cl-voice-button { color: var(--ft-ink); border-color: var(--ft-line); background: #f8e9f3; min-height: 44px }
.fairytale .cl-voice-status,.fairytale .cl-form-thanks,.fairytale .cl-rsvp-feedback { color: var(--ft-muted) }
.fairytale .cl-receipt,.fairytale .cl-success { color: var(--ft-ink); background: #fff }
.fairytale .cl-receipt-code,.fairytale .cl-receipt-download { color: var(--ft-ink) }
.fairytale .cl-music { position: fixed; right: 16px; top: 16px; z-index: 30; color: white; background: #875d83b9; border: 1px solid #fff8 }
.fairytale.admin-bar .cl-music { top: 54px }
.ft-footer { padding: 22px 15px 34px; text-align: center; color: var(--ft-muted); font-size: 15px }
.ft-footer a { display: block; margin: 14px auto 0; font-size: 13px }
@media(max-width:360px) { .ft-paper { padding-inline: 18px } .ft-section { padding-inline: 4px } .ft-timeline li { gap: 6px } }
@media(prefers-reduced-motion:reduce) { .fairytale *, .fairytale *::before, .fairytale *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important } }