:root {
  --bf-black: var(--bf-ink);
  --bf-white: var(--bf-bg);
  --bf-photo-filter: grayscale(1) contrast(1.05);
  --bf-max: 1240px;
  --bf-ease: cubic-bezier(.2, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bf-bg);
  color: var(--bf-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  text-rendering: geometricPrecision;
}

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

a {
  color: inherit;
}

.bfPage {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--bf-ink) 4%, transparent) 0 220px, transparent 360px),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bf-ink) 3%, transparent) 0 220px, transparent 360px),
    var(--bf-bg);
}

.bfShell {
  width: min(var(--bf-max), calc(100% - 44px));
  margin: 0 auto;
  min-width: 0;
}

.bfReveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .75s var(--bf-ease),
    transform .75s var(--bf-ease);
  will-change: opacity, transform;
}

.bfReveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bfReveal[data-delay="1"] {
  transition-delay: .08s;
}

.bfReveal[data-delay="2"] {
  transition-delay: .16s;
}

.bfReveal[data-delay="3"] {
  transition-delay: .24s;
}

.bfHero .bfReveal {
  opacity: 0;
  transform: translateY(22px);
  animation: bfHeroIn .9s var(--bf-ease) forwards;
}

.bfHero .bfReveal[data-delay="1"] {
  animation-delay: .08s;
}

.bfHero .bfReveal[data-delay="2"] {
  animation-delay: .18s;
}

.bfHero .bfReveal[data-delay="3"] {
  animation-delay: .28s;
}

.bfHero .bfReveal[data-delay="4"] {
  animation-delay: .38s;
}

@keyframes bfHeroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bfHero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, .72fr);
  gap: clamp(28px, 4.2vw, 70px);
  align-items: stretch;
  padding: clamp(26px, 4vw, 54px) 0 clamp(44px, 5vw, 82px);
  overflow: hidden;
}

.bfHeroLeft {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 34px;
  overflow: hidden;
}

.bfIssue {
  display: inline-grid;
  grid-template-columns: 56px auto;
  gap: 18px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  color: var(--bf-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bfIssue::before {
  content: "";
  height: 1px;
  background: var(--bf-black);
}

.bfTitleWrap {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.bfOverline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 100%;
  color: var(--bf-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bfTitle {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: Prata, Georgia, serif;
  font-size: clamp(56px, 10.5vw, 138px);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.bfAge {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  min-width: 0;
}

.bfAgeNumber {
  flex: 0 0 auto;
  font-size: clamp(64px, 9vw, 118px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.08em;
}

.bfAgeText {
  max-width: 260px;
  min-width: 0;
  padding-bottom: 8px;
  color: var(--bf-muted);
  font-size: 11px;
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bfHeroText {
  max-width: 640px;
  margin: 0;
  color: var(--bf-muted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.82;
  font-weight: 600;
}

.bfHeroBottom {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.bfHeroMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--bf-line-strong);
  border-bottom: 1px solid var(--bf-line-strong);
  min-width: 0;
}

.bfMetaItem {
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 18px;
  border-right: 1px solid var(--bf-line);
  overflow: hidden;
}

.bfMetaItem:last-child {
  border-right: 0;
}

.bfMetaItem span {
  color: var(--bf-muted2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bfMetaItem b {
  min-width: 0;
  font-size: clamp(17px, 1.8vw, 25px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bfActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin-bottom: 1px;
}

.bfBtn,
.bfMusicBtn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid var(--bf-black);
  background: transparent;
  color: var(--bf-ink);
  text-decoration: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition:
    background .24s var(--bf-ease),
    color .24s var(--bf-ease),
    transform .24s var(--bf-ease),
    border-color .24s var(--bf-ease);
}

.bfBtn:hover,
.bfMusicBtn:hover {
  transform: translateY(-2px);
  background: var(--bf-black);
  color: var(--bf-white);
}

.bfBtnPrimary {
  background: var(--bf-black);
  color: var(--bf-white);
}

.bfBtnPrimary:hover {
  background: transparent;
  color: var(--bf-ink);
}

.bfMusicBtn {
  width: 54px;
  padding: 0;
  border-radius: 999px;
  background: var(--bf-paper);
}

.bfMusicBtn.is-playing {
  background: var(--bf-black);
  color: var(--bf-white);
}

.bfMusicIcon {
  font-size: 14px;
  line-height: 1;
}

.bfHeroRight {
  min-width: 0;
  position: relative;
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 1px solid var(--bf-line);
}

.bfPhotoFrame {
  position: sticky;
  top: 28px;
  height: calc(100vh - 56px);
  min-height: 620px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bf-ink) 6%, transparent), transparent),
    color-mix(in srgb, var(--bf-paper) 72%, var(--bf-bg));
  border: 1px solid var(--bf-line);
}

.bfPhotoFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bf-photo-filter);
  transition:
    transform 1.2s var(--bf-ease),
    filter .8s var(--bf-ease);
}

.bfPhotoFrame:hover img {
  transform: scale(1.025);
  filter: grayscale(.25) contrast(1.04);
}

.bfPlaceholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: 26px;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 12px,
      color-mix(in srgb, var(--bf-ink) 4%, transparent) 12px,
      color-mix(in srgb, var(--bf-ink) 4%, transparent) 13px
    ),
    color-mix(in srgb, var(--bf-paper) 80%, var(--bf-bg));
}

.bfPlaceholderInner {
  display: grid;
  justify-items: center;
  gap: 14px;
  color: var(--bf-muted);
}

.bfPlaceholderMark {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bf-line-strong);
  color: var(--bf-ink);
  font-size: 34px;
  font-weight: 900;
}

.bfPlaceholderText {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bfPhotoLabel {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--bf-paper) 92%, transparent);
  border: 1px solid var(--bf-line);
}

.bfPhotoLabel b {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bfPhotoLabel span {
  color: var(--bf-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bfSection {
  padding: clamp(58px, 8vw, 112px) 0;
  border-top: 1px solid var(--bf-line-strong);
  overflow: hidden;
}

.bfSectionHead {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 62px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.bfNumber {
  color: var(--bf-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bfSectionTitle {
  margin: 0;
  max-width: 860px;
  font-family: Prata, Georgia, serif;
  font-size: clamp(36px, 5.5vw, 74px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfStoryGrid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: start;
}

.bfStoryLead {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 36px);
  line-height: 1.2;
  letter-spacing: -.04em;
  font-weight: 800;
}

.bfText {
  margin: 0;
  color: var(--bf-muted);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 500;
}

.bfText + .bfText {
  margin-top: 18px;
}

.bfSchedule {
  border-top: 1px solid var(--bf-line-strong);
}

.bfScheduleItem {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 80px;
  gap: 24px;
  align-items: center;
  min-height: 108px;
  padding: 24px 0;
  border-bottom: 1px solid var(--bf-line);
}

.bfScheduleTime {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.07em;
}

.bfScheduleTitle {
  margin: 0;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfScheduleText {
  margin: 8px 0 0;
  color: var(--bf-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.bfArrow {
  justify-self: end;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bf-black);
  font-size: 20px;
  transition:
    transform .24s var(--bf-ease),
    background .24s var(--bf-ease),
    color .24s var(--bf-ease);
}

.bfScheduleItem:hover .bfArrow {
  transform: translateY(4px);
  background: var(--bf-black);
  color: var(--bf-white);
}

.bfLocation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: stretch;
}

.bfLocationImage {
  min-height: 460px;
  background: color-mix(in srgb, var(--bf-paper) 72%, var(--bf-bg));
  overflow: hidden;
  border: 1px solid var(--bf-line);
}

.bfLocationImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bf-photo-filter);
  transition:
    transform .9s var(--bf-ease),
    filter .7s var(--bf-ease);
}

.bfLocationImage:hover img {
  transform: scale(1.035);
  filter: grayscale(.2) contrast(1.04);
}

.bfLocationInfo {
  display: grid;
  align-content: space-between;
  gap: 34px;
  padding: 28px 0;
  border-top: 1px solid var(--bf-line-strong);
  border-bottom: 1px solid var(--bf-line-strong);
}

.bfLocationName {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfLocationAddress {
  margin: 18px 0 0;
  color: var(--bf-muted);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.bfDress {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.bfPalette {
  display: grid;
  grid-template-columns: repeat(var(--bf-palette-count), 1fr);
  border: 1px solid var(--bf-black);
  min-height: 220px;
}

.bfColor {
  border-right: 1px solid var(--bf-black);
  transform: scaleY(.96);
  transition: transform .32s var(--bf-ease);
}

.bfPalette:hover .bfColor {
  transform: scaleY(1);
}

.bfColor:last-child {
  border-right: 0;
}

.bfDressText {
  display: grid;
  gap: 22px;
}

.bfDressText h3 {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfGalleryIntro {
  margin-bottom: 28px;
  max-width: 720px;
}

.bfGalleryGrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}

.bfGalleryCol {
  display: grid;
  gap: 18px;
}

.bfGalleryItem {
  min-height: 340px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bf-paper) 72%, var(--bf-bg));
  border: 1px solid var(--bf-line);
}

.bfGalleryItemTall {
  min-height: 700px;
}

.bfGalleryItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bf-photo-filter);
  transition:
    transform .8s var(--bf-ease),
    filter .8s var(--bf-ease);
}

.bfGalleryItem:hover img {
  transform: scale(1.035);
  filter: grayscale(0) contrast(1.02);
}

.bfGifts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  max-width: 980px;
}

.bfGiftTitle {
  margin: 0;
  max-width: 900px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfGiftText {
  max-width: 900px;
  margin: 0;
}

.bfRsvp {
  background: var(--bf-rsvp-bg);
  color: var(--bf-rsvp-text);
  padding: clamp(42px, 6vw, 76px);
}

.bfRsvpGrid {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.bfRsvp .bfNumber,
.bfRsvp .bfText {
  color: color-mix(in srgb, var(--bf-rsvp-text) 70%, transparent);
}

.bfRsvpTitle {
  margin: 14px 0 0;
  font-family: Prata, Georgia, serif;
  font-size: clamp(42px, 6vw, 88px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfRsvpSubtitle {
  margin-top: 22px;
}

.bfFooter {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  border-top: 1px solid var(--bf-line-strong);
}

.bfFooter b {
  display: block;
  font-family: Prata, Georgia, serif;
  font-size: clamp(38px, 6vw, 78px);
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bfFooter span {
  display: block;
  margin-top: 14px;
  color: var(--bf-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* =========================================================
   BLACK FRAME RSVP SHARED BLOCK SKIN
========================================================= */

.bfRsvpFormWrap {
  min-width: 0;
  width: 100%;
  color: var(--bf-rsvp-text);
}

.bfRsvpFormWrap *,
.bfRsvpFormWrap *::before,
.bfRsvpFormWrap *::after {
  box-sizing: border-box;
}

.bfRsvpFormWrap .rsvpSection,
.bfRsvpFormWrap .rsvpGrid,
.bfRsvpFormWrap .rsvpFormCard,
.bfRsvpFormWrap .rsvp,
.bfRsvpFormWrap .iviRsvp,
.bfRsvpFormWrap .rsvpBox,
.bfRsvpFormWrap .rsvpForm {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bf-rsvp-text) !important;
}

.bfRsvpFormWrap form {
  width: 100%;
  max-width: 100%;
  display: grid !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bf-rsvp-text) !important;
}

.bfRsvpFormWrap h1,
.bfRsvpFormWrap h2,
.bfRsvpFormWrap h3,
.bfRsvpFormWrap .rsvpTitle,
.bfRsvpFormWrap .iviRsvpTitle,
.bfRsvpFormWrap .rose-line-svg {
  display: none !important;
}

.bfRsvpFormWrap p,
.bfRsvpFormWrap .rsvpHint,
.bfRsvpFormWrap .iviRsvpHint {
  color: color-mix(in srgb, var(--bf-rsvp-text) 62%, transparent) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.bfRsvpFormWrap .row2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.bfRsvpFormWrap .formRow,
.bfRsvpFormWrap .field,
.bfRsvpFormWrap .formField,
.bfRsvpFormWrap .rsvpField,
.bfRsvpFormWrap .iviField,
.bfRsvpFormWrap .rsvpRow,
.bfRsvpFormWrap .iviRsvpRow,
.bfRsvpFormWrap .form-group {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

.bfRsvpFormWrap .label,
.bfRsvpFormWrap label {
  color: color-mix(in srgb, var(--bf-rsvp-text) 72%, transparent) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
}

.bfRsvpFormWrap input[type="text"],
.bfRsvpFormWrap input[type="email"],
.bfRsvpFormWrap input[type="tel"],
.bfRsvpFormWrap input[type="number"],
.bfRsvpFormWrap textarea,
.bfRsvpFormWrap select,
.bfRsvpFormWrap .field {
  width: 100% !important;
  min-height: 56px !important;
  display: block !important;
  padding: 0 16px !important;
  border: 1px solid color-mix(in srgb, var(--bf-rsvp-text) 28%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--bf-rsvp-text) 6%, var(--bf-rsvp-bg)) !important;
  color: var(--bf-rsvp-text) !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  transition:
    border-color .22s var(--bf-ease),
    background .22s var(--bf-ease);
}

.bfRsvpFormWrap textarea {
  min-height: 118px !important;
  padding-top: 14px !important;
  resize: vertical;
}

.bfRsvpFormWrap input::placeholder,
.bfRsvpFormWrap textarea::placeholder {
  color: color-mix(in srgb, var(--bf-rsvp-text) 55%, transparent) !important;
}

.bfRsvpFormWrap input:focus,
.bfRsvpFormWrap textarea:focus,
.bfRsvpFormWrap select:focus {
  border-color: var(--bf-rsvp-text) !important;
  background: color-mix(in srgb, var(--bf-rsvp-text) 6%, transparent) !important;
}

.bfRsvpFormWrap select option {
  color: #111 !important;
  background: #fff !important;
}

.bfRsvpFormWrap .chips,
.bfRsvpFormWrap .rsvpOptions,
.bfRsvpFormWrap .rsvpChoices,
.bfRsvpFormWrap .iviRsvpOptions,
.bfRsvpFormWrap .iviRsvpChoices,
.bfRsvpFormWrap .guestOptions,
.bfRsvpFormWrap .drinkOptions,
.bfRsvpFormWrap .foodOptions,
.bfRsvpFormWrap .menuOptions,
.bfRsvpFormWrap .rsvpGroup,
.bfRsvpFormWrap .iviRsvpGroup,
.bfRsvpFormWrap .options,
.bfRsvpFormWrap .choices {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 8px 0 0 !important;
}

.bfRsvpFormWrap .chip,
.bfRsvpFormWrap button:not([type="submit"]),
.bfRsvpFormWrap .rsvpOption,
.bfRsvpFormWrap .rsvpChoice,
.bfRsvpFormWrap .iviOption,
.bfRsvpFormWrap .iviChoice,
.bfRsvpFormWrap .choice,
.bfRsvpFormWrap .option,
.bfRsvpFormWrap .rsvpVariant,
.bfRsvpFormWrap .iviVariant,
.bfRsvpFormWrap [data-rsvp-option],
.bfRsvpFormWrap [data-option],
.bfRsvpFormWrap [data-choice] {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid color-mix(in srgb, var(--bf-rsvp-text) 28%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--bf-rsvp-text) 7%, var(--bf-rsvp-bg)) !important;
  color: var(--bf-rsvp-text) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  user-select: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    background .22s var(--bf-ease),
    color .22s var(--bf-ease),
    border-color .22s var(--bf-ease),
    transform .22s var(--bf-ease),
    box-shadow .22s var(--bf-ease);
}

.bfRsvpFormWrap .chip:hover,
.bfRsvpFormWrap button:not([type="submit"]):hover,
.bfRsvpFormWrap .rsvpOption:hover,
.bfRsvpFormWrap .rsvpChoice:hover,
.bfRsvpFormWrap .iviOption:hover,
.bfRsvpFormWrap .iviChoice:hover,
.bfRsvpFormWrap .choice:hover,
.bfRsvpFormWrap .option:hover,
.bfRsvpFormWrap .rsvpVariant:hover,
.bfRsvpFormWrap .iviVariant:hover,
.bfRsvpFormWrap [data-rsvp-option]:hover,
.bfRsvpFormWrap [data-option]:hover,
.bfRsvpFormWrap [data-choice]:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--bf-rsvp-text) 72%, transparent) !important;
  color: var(--bf-rsvp-text) !important;
}

.bfRsvpFormWrap .chip[data-active="true"],
.bfRsvpFormWrap .chip[data-active="1"],
.bfRsvpFormWrap .chip.is-active,
.bfRsvpFormWrap .chip.active,
.bfRsvpFormWrap .chip.selected,
.bfRsvpFormWrap .chip.is-selected,
.bfRsvpFormWrap .chip.checked,
.bfRsvpFormWrap .chip.is-checked,
.bfRsvpFormWrap .chip[aria-pressed="true"],
.bfRsvpFormWrap .chip[aria-checked="true"],
.bfRsvpFormWrap button:not([type="submit"])[data-active="true"],
.bfRsvpFormWrap button:not([type="submit"])[data-active="1"],
.bfRsvpFormWrap button:not([type="submit"]).is-active,
.bfRsvpFormWrap button:not([type="submit"]).active,
.bfRsvpFormWrap button:not([type="submit"]).selected,
.bfRsvpFormWrap button:not([type="submit"]).is-selected,
.bfRsvpFormWrap button:not([type="submit"])[aria-pressed="true"],
.bfRsvpFormWrap button:not([type="submit"])[aria-checked="true"],
.bfRsvpFormWrap [data-active="true"],
.bfRsvpFormWrap [data-active="1"],
.bfRsvpFormWrap [data-selected="true"],
.bfRsvpFormWrap [data-selected="1"],
.bfRsvpFormWrap [data-checked="true"],
.bfRsvpFormWrap [data-checked="1"],
.bfRsvpFormWrap [data-state="active"],
.bfRsvpFormWrap [data-state="selected"],
.bfRsvpFormWrap [data-state="checked"],
.bfRsvpFormWrap .is-active,
.bfRsvpFormWrap .active,
.bfRsvpFormWrap .selected,
.bfRsvpFormWrap .is-selected,
.bfRsvpFormWrap .checked,
.bfRsvpFormWrap .is-checked {
  background: var(--bf-rsvp-accent) !important;
  border-color: var(--bf-rsvp-accent) !important;
  color: var(--bf-rsvp-active-text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-rsvp-accent) 30%, transparent) !important;
}

.bfRsvpFormWrap .chip[data-active="true"] *,
.bfRsvpFormWrap .chip[data-active="1"] *,
.bfRsvpFormWrap .chip.is-active *,
.bfRsvpFormWrap .chip.active *,
.bfRsvpFormWrap .chip.selected *,
.bfRsvpFormWrap button:not([type="submit"])[data-active="true"] *,
.bfRsvpFormWrap button:not([type="submit"])[data-active="1"] *,
.bfRsvpFormWrap button:not([type="submit"]).is-active *,
.bfRsvpFormWrap button:not([type="submit"]).active *,
.bfRsvpFormWrap button:not([type="submit"]).selected * {
  color: inherit !important;
}

.bfRsvpFormWrap label:has(input[type="radio"]),
.bfRsvpFormWrap label:has(input[type="checkbox"]) {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid color-mix(in srgb, var(--bf-rsvp-text) 28%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--bf-rsvp-text) 7%, var(--bf-rsvp-bg)) !important;
  color: var(--bf-rsvp-text) !important;
  cursor: pointer !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  user-select: none !important;
  transition:
    background .22s var(--bf-ease),
    color .22s var(--bf-ease),
    border-color .22s var(--bf-ease),
    transform .22s var(--bf-ease),
    box-shadow .22s var(--bf-ease);
}

.bfRsvpFormWrap label:has(input[type="radio"]) input,
.bfRsvpFormWrap label:has(input[type="checkbox"]) input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bfRsvpFormWrap label:has(input[type="radio"]):hover,
.bfRsvpFormWrap label:has(input[type="checkbox"]):hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--bf-rsvp-text) 72%, transparent) !important;
}

.bfRsvpFormWrap label:has(input[type="radio"]:checked),
.bfRsvpFormWrap label:has(input[type="checkbox"]:checked) {
  background: var(--bf-rsvp-accent) !important;
  border-color: var(--bf-rsvp-accent) !important;
  color: var(--bf-rsvp-active-text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-rsvp-accent) 30%, transparent) !important;
}

.bfRsvpFormWrap .rsvpTotal,
.bfRsvpFormWrap #rsvpTotal,
.bfRsvpFormWrap .guestCount,
.bfRsvpFormWrap .rsvpGuestCount,
.bfRsvpFormWrap .iviGuestCount,
.bfRsvpFormWrap .counter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 2px 0 0 !important;
  color: color-mix(in srgb, var(--bf-rsvp-text) 72%, transparent) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.bfRsvpFormWrap .rsvpTotal b,
.bfRsvpFormWrap #rsvpTotal b {
  color: var(--bf-rsvp-text) !important;
  font-weight: 900 !important;
}

.bfRsvpFormWrap .consent {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: flex-start !important;
  justify-content: start !important;
  gap: 12px !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--bf-rsvp-text) 72%, transparent) !important;
  text-align: left !important;
  cursor: pointer !important;
}

.bfRsvpFormWrap .consent input {
  position: relative !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin-top: 1px !important;
  accent-color: var(--bf-rsvp-accent) !important;
}

.bfRsvpFormWrap .consent span {
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.bfRsvpFormWrap .consent small {
  display: inline-block !important;
  margin-top: 5px !important;
  opacity: .72 !important;
}

.bfRsvpFormWrap .consent a {
  color: var(--bf-rsvp-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.bfRsvpFormWrap button[type="submit"],
.bfRsvpFormWrap .btn-full {
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  border: 1px solid var(--bf-rsvp-accent) !important;
  border-radius: 0 !important;
  background: var(--bf-rsvp-accent) !important;
  color: var(--bf-rsvp-active-text) !important;
  padding: 0 26px !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    background .22s var(--bf-ease),
    color .22s var(--bf-ease),
    transform .22s var(--bf-ease),
    border-color .22s var(--bf-ease);
}

.bfRsvpFormWrap button[type="submit"]:hover,
.bfRsvpFormWrap .btn-full:hover {
  background: transparent !important;
  color: var(--bf-rsvp-text) !important;
  transform: translateY(-2px) !important;
}

.bfRsvpFormWrap .statusBox {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--bf-rsvp-text) 20%, transparent) !important;
  background: color-mix(in srgb, var(--bf-rsvp-text) 8%, transparent) !important;
  color: var(--bf-rsvp-text) !important;
}

.bfRsvpFormWrap .card,
.bfRsvpFormWrap .panel,
.bfRsvpFormWrap .box,
.bfRsvpFormWrap .rsvpCard,
.bfRsvpFormWrap .iviCard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.bfRsvpFormWrap [class*="Grid"],
.bfRsvpFormWrap [class*="grid"] {
  gap: 12px !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
  .bfHero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
    gap: 28px;
  }

  .bfTitle {
    font-size: clamp(54px, 9vw, 112px);
  }

  .bfPhotoFrame {
    min-height: 560px;
  }
}

@media (max-width: 860px) {
  .bfHero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .bfHeroRight {
    order: -1;
    border-left: 0;
    padding-left: 0;
  }

  .bfPhotoFrame {
    position: relative;
    top: auto;
    height: 66vh;
    min-height: 460px;
  }

  .bfStoryGrid,
  .bfLocation,
  .bfDress,
  .bfRsvpGrid,
  .bfGifts {
    grid-template-columns: 1fr;
  }

  .bfSectionHead {
    grid-template-columns: 1fr;
    gap: 12px;
  }

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

  .bfGalleryItemTall {
    min-height: 460px;
  }
}

@media (max-width: 760px) {
  .bfRsvpGrid {
    grid-template-columns: 1fr;
  }

  .bfRsvpFormWrap .row2 {
    grid-template-columns: 1fr !important;
  }

  .bfRsvpFormWrap .chips,
  .bfRsvpFormWrap .rsvpOptions,
  .bfRsvpFormWrap .rsvpChoices,
  .bfRsvpFormWrap .iviRsvpOptions,
  .bfRsvpFormWrap .iviRsvpChoices,
  .bfRsvpFormWrap .guestOptions,
  .bfRsvpFormWrap .drinkOptions,
  .bfRsvpFormWrap .foodOptions,
  .bfRsvpFormWrap .menuOptions,
  .bfRsvpFormWrap .rsvpGroup,
  .bfRsvpFormWrap .iviRsvpGroup,
  .bfRsvpFormWrap .options,
  .bfRsvpFormWrap .choices {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .bfRsvpFormWrap .chip,
  .bfRsvpFormWrap button:not([type="submit"]),
  .bfRsvpFormWrap label:has(input[type="radio"]),
  .bfRsvpFormWrap label:has(input[type="checkbox"]),
  .bfRsvpFormWrap .rsvpOption,
  .bfRsvpFormWrap .rsvpChoice,
  .bfRsvpFormWrap .iviOption,
  .bfRsvpFormWrap .iviChoice,
  .bfRsvpFormWrap .choice,
  .bfRsvpFormWrap .option,
  .bfRsvpFormWrap .rsvpVariant,
  .bfRsvpFormWrap .iviVariant,
  .bfRsvpFormWrap [data-rsvp-option],
  .bfRsvpFormWrap [data-option],
  .bfRsvpFormWrap [data-choice],
  .bfRsvpFormWrap button[type="submit"],
  .bfRsvpFormWrap .btn-full {
    width: 100% !important;
  }
}

@media (max-width: 680px) {
  .bfShell {
    width: calc(100% - 24px);
  }

  .bfIssue {
    grid-template-columns: 38px auto;
    gap: 12px;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .bfOverline {
    gap: 8px 12px;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .bfTitle {
    font-size: clamp(44px, 17vw, 78px);
    line-height: .92;
    letter-spacing: -.06em;
  }

  .bfAge {
    align-items: center;
    gap: 14px;
  }

  .bfAgeNumber {
    font-size: clamp(60px, 20vw, 88px);
  }

  .bfAgeText {
    max-width: 190px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .bfHeroText {
    font-size: 15px;
    line-height: 1.72;
  }

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

  .bfMetaItem {
    min-height: 82px;
    border-right: 0;
    border-bottom: 1px solid var(--bf-line);
    padding: 16px 0;
  }

  .bfMetaItem:last-child {
    border-bottom: 0;
  }

  .bfMetaItem b {
    font-size: 22px;
  }

  .bfActions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
  }

  .bfBtn {
    min-height: 52px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .bfMusicBtn {
    width: 58px;
    min-height: 52px;
  }

  .bfPhotoFrame {
    height: 58vh;
    min-height: 380px;
  }

  .bfPhotoLabel {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .bfScheduleItem {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bfArrow {
    justify-self: start;
  }

  .bfPalette {
    min-height: 160px;
  }


  .bfRsvp {
    padding: 30px 18px;
  }
}

@media (max-width: 430px) {
  .bfShell {
    width: calc(100% - 18px);
  }

  .bfHero {
    gap: 24px;
  }

  .bfPhotoFrame {
    height: 52vh;
    min-height: 330px;
  }

  .bfTitle {
    font-size: clamp(42px, 16.5vw, 64px);
  }

  .bfAgeNumber {
    font-size: clamp(58px, 18vw, 76px);
  }

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

  .bfMusicBtn {
    width: 100%;
  }

  .bfSection {
    padding: 52px 0;
  }

  .bfSectionTitle {
    font-size: clamp(34px, 12vw, 50px);
  }
}

@media (max-width: 360px) {
  .bfTitle {
    font-size: 40px;
  }

  .bfAge {
    align-items: flex-start;
    flex-direction: column;
  }

  .bfAgeText {
    max-width: 100%;
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .bfReveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Cover image visibility from Studio */
body[data-hero-image-enabled="0"] .hero-photo,
body[data-hero-image-enabled="0"] .hero-image,
body[data-hero-image-enabled="0"] .hero__photo,
body[data-hero-image-enabled="0"] .hero__image,
body[data-hero-image-enabled="0"] .cover-photo,
body[data-hero-image-enabled="0"] .cover-image,
body[data-hero-image-enabled="0"] [data-hero-photo],
body[data-hero-image-enabled="0"] [data-hero-image],
html[data-hero-image-enabled="0"] .hero-photo,
html[data-hero-image-enabled="0"] .hero-image,
html[data-hero-image-enabled="0"] .hero__photo,
html[data-hero-image-enabled="0"] .hero__image,
html[data-hero-image-enabled="0"] .cover-photo,
html[data-hero-image-enabled="0"] .cover-image,
html[data-hero-image-enabled="0"] [data-hero-photo],
html[data-hero-image-enabled="0"] [data-hero-image] {
  display: none !important;
}

body[data-hero-image-enabled="0"] .hero,
body[data-hero-image-enabled="0"] .hero__inner,
body[data-hero-image-enabled="0"] .cover,
body[data-hero-image-enabled="0"] .cover__inner,
html[data-hero-image-enabled="0"] .hero,
html[data-hero-image-enabled="0"] .hero__inner,
html[data-hero-image-enabled="0"] .cover,
html[data-hero-image-enabled="0"] .cover__inner {
  background-image: none !important;
}


/* Hero without cover photo */
body[data-hero-image-enabled="0"] .hero-photo,
body[data-hero-image-enabled="0"] .hero-image,
body[data-hero-image-enabled="0"] .hero__photo,
body[data-hero-image-enabled="0"] .hero__image,
body[data-hero-image-enabled="0"] .cover-photo,
body[data-hero-image-enabled="0"] .cover-image,
body[data-hero-image-enabled="0"] [data-hero-photo],
body[data-hero-image-enabled="0"] [data-hero-image],
html[data-hero-image-enabled="0"] .hero-photo,
html[data-hero-image-enabled="0"] .hero-image,
html[data-hero-image-enabled="0"] .hero__photo,
html[data-hero-image-enabled="0"] .hero__image,
html[data-hero-image-enabled="0"] .cover-photo,
html[data-hero-image-enabled="0"] .cover-image,
html[data-hero-image-enabled="0"] [data-hero-photo],
html[data-hero-image-enabled="0"] [data-hero-image] {
  display: none !important;
}

body[data-hero-image-enabled="0"] .hero,
body[data-hero-image-enabled="0"] .hero__inner,
body[data-hero-image-enabled="0"] .hero-inner,
body[data-hero-image-enabled="0"] .hero-grid,
body[data-hero-image-enabled="0"] .cover,
body[data-hero-image-enabled="0"] .cover__inner,
body[data-hero-image-enabled="0"] .cover-inner,
html[data-hero-image-enabled="0"] .hero,
html[data-hero-image-enabled="0"] .hero__inner,
html[data-hero-image-enabled="0"] .hero-inner,
html[data-hero-image-enabled="0"] .hero-grid,
html[data-hero-image-enabled="0"] .cover,
html[data-hero-image-enabled="0"] .cover__inner,
html[data-hero-image-enabled="0"] .cover-inner {
  background-image: none !important;
}

body[data-hero-image-enabled="0"] .hero-grid,
body[data-hero-image-enabled="0"] .hero__inner,
body[data-hero-image-enabled="0"] .hero-inner,
body[data-hero-image-enabled="0"] .cover-grid,
body[data-hero-image-enabled="0"] .cover__inner,
body[data-hero-image-enabled="0"] .cover-inner,
html[data-hero-image-enabled="0"] .hero-grid,
html[data-hero-image-enabled="0"] .hero__inner,
html[data-hero-image-enabled="0"] .hero-inner,
html[data-hero-image-enabled="0"] .cover-grid,
html[data-hero-image-enabled="0"] .cover__inner,
html[data-hero-image-enabled="0"] .cover-inner {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-hero-image-enabled="0"] .hero-copy,
body[data-hero-image-enabled="0"] .hero-content,
body[data-hero-image-enabled="0"] .hero__content,
body[data-hero-image-enabled="0"] .hero-text,
body[data-hero-image-enabled="0"] .cover-copy,
body[data-hero-image-enabled="0"] .cover-content,
body[data-hero-image-enabled="0"] .cover__content,
html[data-hero-image-enabled="0"] .hero-copy,
html[data-hero-image-enabled="0"] .hero-content,
html[data-hero-image-enabled="0"] .hero__content,
html[data-hero-image-enabled="0"] .hero-text,
html[data-hero-image-enabled="0"] .cover-copy,
html[data-hero-image-enabled="0"] .cover-content,
html[data-hero-image-enabled="0"] .cover__content {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
  text-align: center !important;
  justify-self: center !important;
}

body[data-hero-image-enabled="0"] .hero,
body[data-hero-image-enabled="0"] .cover,
html[data-hero-image-enabled="0"] .hero,
html[data-hero-image-enabled="0"] .cover {
  min-height: auto !important;
  padding-top: clamp(72px, 9vw, 130px) !important;
  padding-bottom: clamp(72px, 9vw, 130px) !important;
}

@media (max-width: 760px) {
  body[data-hero-image-enabled="0"] .hero,
  body[data-hero-image-enabled="0"] .cover,
  html[data-hero-image-enabled="0"] .hero,
  html[data-hero-image-enabled="0"] .cover {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  body[data-hero-image-enabled="0"] .hero-copy,
  body[data-hero-image-enabled="0"] .hero-content,
  body[data-hero-image-enabled="0"] .hero__content,
  body[data-hero-image-enabled="0"] .hero-text,
  body[data-hero-image-enabled="0"] .cover-copy,
  body[data-hero-image-enabled="0"] .cover-content,
  body[data-hero-image-enabled="0"] .cover__content,
  html[data-hero-image-enabled="0"] .hero-copy,
  html[data-hero-image-enabled="0"] .hero-content,
  html[data-hero-image-enabled="0"] .hero__content,
  html[data-hero-image-enabled="0"] .hero-text,
  html[data-hero-image-enabled="0"] .cover-copy,
  html[data-hero-image-enabled="0"] .cover-content,
  html[data-hero-image-enabled="0"] .cover__content {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 20px !important;
  }
}


/* v4: hero without cover image */
.bfHero--no-photo {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(64px, 7vw, 110px);
  padding-bottom: clamp(64px, 7vw, 110px);
}

.bfHero--no-photo .bfHeroLeft {
  width: min(100%, 980px);
  margin-inline: auto;
  align-content: center;
}

.bfHero--no-photo .bfTitleWrap,
.bfHero--no-photo .bfHeroBottom {
  max-width: 900px;
}

@media (max-width: 760px) {
  .bfHero--no-photo {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* Location photo toggle */
.bfLocation.bfLocation--no-photo{grid-template-columns:minmax(0,1fr)!important}