html[data-style="lotus"] {
  --paper: #f7f3e9;
  --surface: #fffcf5;
  --ink: #264f4c;
  --muted: #596f6d;
  --accent: #315e59;
  --line: #d4dbce;
  --gold: #945d68;
  --envelope-paper: #f7f5ed;
  --envelope-flap: #f8f6ef;
  --envelope-fold: #aab59c;
  --envelope-lining: #c2cdb8;
  --envelope-seal: #789077;
  --envelope-shadow: #264f4c24;
}

.hero { min-height: calc(100svh - 160px); }
.hero-art { width: 100%; max-width: 440px; }
.lotus-art { width: 100%; }
.lotus-art img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; }
.hero-art .art-caption { font: italic 1.0625rem/1.5 var(--serif); margin-top: 18px; }
.hero-art .art-date { right: -20px; }
[data-style="lotus"] .hero .ampersand { color: #b48087; }
[data-style="lotus"] .countdown-section { border-color: #bdcdc2; }
[data-style="lotus"] .lotus-envelope-art { display: inline; }
[data-style="lotus"] .envelope-sprig,
[data-style="lotus"] .pocket-paper,
[data-style="lotus"] .pocket-fold { display: none; }

/* Each painting is clipped to its paper panel, so the lotus lifts with the flap. */
[data-style="lotus"] .envelope-pocket { border-color: #c2c8b5; }
[data-style="lotus"] .envelope-flap {
  height: 50%;
  filter: drop-shadow(0 2px 2px #5c695520);
}
[data-style="lotus"] .flap-fold,
[data-style="lotus"] .lotus-pocket-fold {
  fill: none;
  stroke: var(--envelope-fold);
  stroke-width: 1;
  stroke-opacity: .65;
}
[data-style="lotus"] .envelope-address { top: 59%; bottom: 8%; left: 25%; right: 25%; }
[data-style="lotus"] .envelope-to { font-size: clamp(.5rem, 1.5vw, .65rem); }
[data-style="lotus"] .envelope-name { font-size: clamp(1.125rem, 3.2vw, 2.2rem); }
[data-style="lotus"] .envelope-address:has(.long-name) {
  top: 58%;
  bottom: 5%;
  left: 12%;
  right: 12%;
  gap: 4px;
  background: radial-gradient(ellipse, #f8f6eff0 45%, #f8f6ef00 75%);
}
[data-style="lotus"] .envelope-name.long-name { font-size: clamp(.75rem, 2vw, 1.5rem); }
[data-style="lotus"] .envelope-name.very-long-name { font-size: clamp(.625rem, 1.3vw, 1.0625rem); }
[data-style="lotus"] .envelope-seal {
  top: 50%;
  width: clamp(36px, 11.5%, 64px);
  border: 3px solid #ffffff30;
  background: radial-gradient(circle at 35% 25%, #ffffff26, transparent 70%), var(--envelope-seal);
  box-shadow: 0 2px 4px #3c51352b, inset 0 0 0 1px #ffffff35, inset 0 0 0 3px #455b3820;
  color: #fffdf0;
}
[data-style="lotus"] .envelope-seal span { font-size: clamp(.625rem, 2vw, 1rem); }

/* Continuous paper, with a finite opening arrangement and sparse accents below. */
[data-style="lotus"] #invitation-content {
  position: relative;
  isolation: isolate;
  background: #f7f5ed url("/images/invitation-paper.svg") repeat;
}
[data-style="lotus"] .site-header {
  background: #f7f5ed url("/images/invitation-paper.svg") repeat;
}
[data-style="lotus"] #main { position: relative; isolation: isolate; }
[data-style="lotus"] #main::before,
[data-style="lotus"] #main::after {
  content: "";
  position: absolute;
  top: 0;
  height: 740px;
  width: clamp(56px, calc((100vw - 1120px) / 2 + 24px), 230px);
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("/images/envelope-lotus-paper.webp");
  background-size: 1110px 740px;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to right, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 16%, #000 75%, transparent);
  mask-size: 100% 100%, 100% 740px;
  mask-repeat: no-repeat, repeat-y;
  mask-composite: intersect;
}
[data-style="lotus"] #main::before { left: 0; background-position: left top; }
[data-style="lotus"] #main::after {
  right: 0;
  height: 990px;
  background-image: url("/images/envelope-lotus-paper.webp"), url("/images/envelope-lotus-paper.webp");
  background-position: right -490px, right 250px;
  mask-image: linear-gradient(to left, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 16%, #000 75%, transparent);
  mask-position: 0 0, 0 250px;
}

/* Individual, differently sized crops leave long stretches of unpainted paper. */
[data-style="lotus"] .photo-section,
[data-style="lotus"] .day-section,
[data-style="lotus"] .rsvp-section { position: relative; isolation: isolate; }
[data-style="lotus"] .photo-section::after,
[data-style="lotus"] .day-section::before,
[data-style="lotus"] .rsvp-section::before {
  content: "";
  position: absolute;
  width: clamp(56px, calc((100vw - 1120px) / 2 + 24px), 230px);
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to right, #000 15%, transparent), linear-gradient(to bottom, transparent, #000 30%, #000 65%, transparent);
  mask-composite: intersect;
}
[data-style="lotus"] .photo-section::after {
  right: 0;
  bottom: 12%;
  height: 360px;
  opacity: .23;
  background-image: url("/images/envelope-lotus-paper.webp");
  background-size: 900px 600px;
  background-position: right bottom;
  mask-image: linear-gradient(to left, #000 15%, transparent), linear-gradient(to bottom, transparent, #000 30%, #000 65%, transparent);
}
[data-style="lotus"] .day-section::before {
  left: calc((100% - 100vw) / 2 + 8px);
  top: 8%;
  height: 230px;
  opacity: .26;
  background-image: url("/images/envelope-lotus-flower.webp");
  background-size: 240px auto;
  background-position: left center;
}
[data-style="lotus"] .rsvp-section::before {
  left: calc((100% - 100vw) / 2 + 8px);
  bottom: 30px;
  height: 280px;
  opacity: .17;
  background-image: url("/images/envelope-lotus-paper.webp");
  background-size: 780px 520px;
  background-position: left bottom;
}
[data-style="lotus"] .site-header-inner,
[data-style="lotus"] .countdown-section,
[data-style="lotus"] .photo-section { border: 0; }

/* Repeated rules define each chapter while the same paper continues beneath. */
.section-divider { display: none; }
[data-style="lotus"] .section-divider {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 8px;
  pointer-events: none;
}
[data-style="lotus"] .section-divider::before,
[data-style="lotus"] .section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #a7b6a9;
}
[data-style="lotus"] .section-divider img {
  display: block;
  width: 32px;
  height: 30px;
  flex-shrink: 0;
}
[data-style="lotus"] #the-day,
[data-style="lotus"] #itinerary,
[data-style="lotus"] #rsvp { scroll-margin-top: 46px; }

/* Small illustrated seals and serif labels echo the invitation's stationery. */
.detail-symbol { display: none; }
[data-style="lotus"] .detail-block .detail-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 21px;
  color: var(--gold);
  font: italic 1.75rem/1.2 var(--serif);
  letter-spacing: -.025em;
  text-transform: none;
}
[data-style="lotus"] .detail-heading::after {
  content: "";
  width: 32px;
  height: 1px;
  background: #bdcdc2;
}
[data-style="lotus"] .detail-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #945d6840;
  border-radius: 50%;
  background: #eadbd733;
}
[data-style="lotus"] .detail-symbol svg { width: 30px; height: 30px; }

[data-style="lotus"] .countdown-section {
  background: radial-gradient(ellipse at center, #dce5d744, transparent 72%);
}
[data-style="lotus"] .photo-section {
  background: radial-gradient(ellipse at 50% 35%, #fffcf56b, transparent 70%);
}
[data-style="lotus"] .rsvp-card {
  background: #f7f5ed url("/images/invitation-paper.svg") repeat;
  border-color: #b9c8b766;
  border-radius: 10px;
  box-shadow: 0 12px 42px -22px #526b5133;
}
[data-style="lotus"] input[type="email"],
[data-style="lotus"] select,
[data-style="lotus"] textarea { background: #fffcf573; }
[data-style="lotus"] .envelope-letter {
  overflow: hidden;
  background: #f7f5ed url("/images/invitation-paper.svg") repeat;
}
[data-style="lotus"] .envelope-letter::before,
[data-style="lotus"] .envelope-letter::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 21%;
  z-index: -1;
  pointer-events: none;
  opacity: .52;
  background-image: url("/images/envelope-lotus-paper.webp");
  background-size: auto 100%;
  mask-image: linear-gradient(to right, #000, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-composite: intersect;
}
[data-style="lotus"] .envelope-letter::before { left: 0; background-position: left center; }
[data-style="lotus"] .envelope-letter::after {
  right: 0;
  background-position: right center;
  mask-image: linear-gradient(to left, #000, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

/* The panoramic field follows the RSVP without a separate footer strip. */
.rsvp-contact { font-size: .8125rem; text-underline-offset: 4px; }
[data-style="lotus"] .rsvp-section { padding-bottom: 24px; }
.lotus-field { display: none; }
[data-style="lotus"] .lotus-field {
  display: block;
  overflow: hidden;
  margin-top: 0;
  line-height: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 10%);
}
[data-style="lotus"] .lotus-field img { display: block; width: 100%; height: auto; }

@media (max-width: 950px) {
  .hero-art { max-width: 340px; }
  .lotus-art img { max-height: 500px; }
}

@media (max-width: 650px) {
  .hero { min-height: calc(100svh - 155px); gap: 22px; padding-block: 35px 46px; }
  .hero-art { max-width: 230px; }
  .lotus-art img { max-height: 310px; }
  .hero-art .art-caption, .hero-art .art-date { display: none; }
  [data-style="lotus"] #main::before,
  [data-style="lotus"] #main::after {
    width: 56px;
    opacity: .36;
    height: 480px;
    background-size: 720px 480px;
    mask-size: 100% 100%, 100% 480px;
  }
  [data-style="lotus"] #main::after {
    height: 640px;
    background-position: right -320px, right 160px;
    mask-position: 0 0, 0 160px;
  }
  [data-style="lotus"] .photo-section::after { height: 260px; background-size: 660px 440px; opacity: .16; }
  [data-style="lotus"] .day-section::before { height: 170px; background-size: 180px auto; opacity: .2; }
  [data-style="lotus"] .rsvp-section::before { height: 210px; background-size: 600px 400px; opacity: .13; }
  [data-style="lotus"] .rsvp-section { padding-bottom: 20px; }
  [data-style="lotus"] .lotus-field img { width: 170%; max-width: none; margin-left: -35%; }
  [data-style="lotus"] .detail-block { border-bottom: 0; }
  [data-style="lotus"] .day-details { gap: 32px; }
  [data-style="lotus"] .detail-block .detail-heading { font-size: 1.65rem; margin-bottom: 16px; }
  [data-style="lotus"] .section-divider { gap: 14px; }
}