/* Garden stationery: shared floral artwork, foil borders and layered paper. */
body {
  background-color: var(--ivory);
  background-image: radial-gradient(#b18a4d14 .6px, transparent .6px);
  background-size: 6px 6px;
}
.site-header { border-bottom: 1px solid #c6a56f70; }
.brand { position: relative; }
.brand::after { content: ''; width: 23px; height: 1px; background: var(--gold); margin-top: 6px; }
nav a { position: relative; }
nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s ease; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.hero { padding: 34px 7% 38px; background-size: cover; }
.hero-inner {
  max-width: 1020px;
  padding: 30px 60px 34px;
  border: 1px solid #be9d68;
  border-radius: 250px 250px 8px 8px / 110px 110px 8px 8px;
  background: linear-gradient(110deg, #fffdf9ee, #fffaf1f5 50%, #fffdf9ed);
  box-shadow: 0 18px 50px #684b3320, inset 0 0 0 7px #fffaf1, inset 0 0 0 8px #c9ae7980;
}
.hero-inner::after { content: ''; position: absolute; inset: 17px; border: 1px solid #c9ae7945; border-radius: inherit; z-index: -1; pointer-events: none; }
.monogram-crest {
  width: 80px; height: 80px; margin: 0 auto 16px; padding: 10px;
  display: grid; place-items: center; border: 1px solid #c7a268; border-radius: 50%;
  outline: 4px solid #fffaf1; background: #fffaf1;
  box-shadow: 0 0 0 5px #cfb47b70, 0 7px 20px #8d70411a;
}
.monogram-crest img { width: 100%; height: 100%; object-fit: contain; }

.hero-opening { margin-top: 18px; }
.hero-intro { margin-top: 8px; }
.couple { font-size: clamp(40px, 4.8vw, 65px); line-height: 1.28; gap: 4px; margin-top: 20px; text-shadow: 0 1px 0 #fff; }
.couple .couple-amp { display: flex; align-items: center; justify-content: center; gap: 20px; color: #9a9f7b; }
.couple-amp::before, .couple-amp::after { content: ''; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #bda16b); }
.couple-amp::after { transform: rotate(180deg); }
.hero-date { margin-top: 24px; }
.hero-request { margin: 23px auto 0; font: 500 12px/1.9 var(--sans); letter-spacing: 1.6px; color: var(--rust); }
.invitation-date { display: grid; grid-template-columns: 1fr 85px 1fr; align-items: center; max-width: 450px; margin: 25px auto 0; column-gap: 15px; color: var(--rust); }
.invitation-date .date-month,.invitation-date .date-year { grid-column: 2; font: 500 12px/1.5 var(--sans); letter-spacing: 2px; }
.invitation-date .date-weekday,.invitation-date .date-hour { grid-row: 2; font-size: 12px; letter-spacing: 1px; border-block: 1px solid #b18a4d80; padding: 12px 0; }
.invitation-date .date-weekday { grid-column: 1; }.invitation-date .date-hour { grid-column: 3; }
.invitation-date strong { grid-column: 2; grid-row: 2; font: 500 59px/1.2 var(--serif); color: var(--gold); font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.hero-address { font: italic 22px/1.5 var(--serif); margin: 23px auto 0; text-wrap: balance; }
.hero .button { border-radius: 2px; background: #fffaf1c9; }
.celebration-ribbon { position: relative; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 25px 7%; color: white; background: var(--pink); border-block: 1px solid #cd959980; overflow: hidden; }
.celebration-ribbon p { font: 700 31px/1.15 var(--serif); }
.celebration-ribbon p span { font: 700 34px/1.2 var(--script); }
.ribbon-rings { width: 80px; flex: 0 0 80px; opacity: .95; }
.ribbon-rings svg { display: block; width: 100%; }
.ribbon-line { width: 95px; height: 1px; background: #ffffff85; }
.floral-accent { position: absolute; pointer-events: none; }
.blessing { position: relative; isolation: isolate; overflow: hidden; padding: 46px 24px; background: #f0f0e5; border: 0; }
.blessing-card { position: relative; max-width: 720px; margin: auto; padding: 36px 65px 30px; background: #fffdf8ed; border: 1px solid #c6a56f9c; border-radius: 140px 140px 3px 3px / 70px 70px 3px 3px; box-shadow: 0 7px 28px #5e59400b, inset 0 0 0 6px #fffdf8, inset 0 0 0 7px #d9c49c80; }
.blessing-card .script { font-size: clamp(38px, 4vw, 48px); }
.blessing blockquote { position: relative; font-size: 32px; line-height: 1.35; margin-top: 12px; }
.verse-reference { margin-top: 20px; }
.blessing-flower-left, .blessing-flower-right { width: 320px; top: 4px; opacity: .63; z-index: -1; }
.blessing-flower-left { left: -95px; transform: rotate(12deg); }
.blessing-flower-right { right: -95px; transform: scaleX(-1) rotate(12deg); }
.section-intro .eyebrow { display: flex; align-items: center; justify-content: center; gap: 13px; }
.section-intro .eyebrow::before, .section-intro .eyebrow::after { content: ''; width: 34px; height: 1px; background: #b18a4d80; }
.section-intro h2 em { color: var(--rust); }
.entourage { padding-top: 48px; background: radial-gradient(ellipse at 5% 10%, #ead0c52e, transparent 55%), radial-gradient(ellipse at 100% 85%, #c3c9b535, transparent 50%); }
.entourage::before { display: none; }
.entourage-paper { isolation: isolate; overflow: hidden; padding-top: 28px; border-color: #bb9b62b3; box-shadow: 0 12px 45px #715a3210, inset 0 0 0 6px var(--paper), inset 0 0 0 7px #d1bc936b; background: #fffdf8f7; }
.entourage-paper > .role-grid, .entourage-paper > .ceremony-group { position: relative; z-index: 1; }
.paper-crest { width: 67px; margin: 0 auto 23px; color: var(--gold); }
.paper-crest svg { display: block; width: 100%; }
.paper-title { position: relative; z-index: 1; text-align: center; font: 500 clamp(27px, 3.2vw, 38px)/1.3 var(--serif); letter-spacing: 1px; color: var(--gold); margin: -8px auto 28px; text-wrap: balance; }
.entourage-name { display:block; width:100%; white-space:nowrap; }
.paired-role + .paired-role { margin-top:26px; }
.entourage-paper .role-grid.two { gap:0; }
.entourage-paper .role-grid.two > .role { padding-inline:6px; }
.entourage-paper .pairs li { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding-inline:0; }
.entourage-paper .pairs li > span { min-width:0; padding-inline:6px; }
.paper-flower-left, .paper-flower-right { width: 225px; top: 0; opacity: .6; z-index: -1; }
.paper-flower-left { left: -30px; }
.paper-flower-right { right: -30px; transform: scaleX(-1); }
.role h3::after { content: ''; display: block; width: 31px; height: 1px; background: #b18a4d80; margin: 9px auto 0; }
.ceremony-group { position: relative; border-top-color: #cdbb973f; }
.ceremony-group::before { content: ''; position: absolute; left: calc(50% - 3px); top: -4px; width: 6px; height: 6px; transform: rotate(45deg); background: #c2a777; box-shadow: 0 0 0 5px var(--paper); }
.principal .pairs li { border-radius: 2px; padding: 10px 0; }
.principal .pairs li:nth-child(odd) { background: #ede8d85e; }
.bridal-party th { border-bottom: 1px solid #cdbb9766; padding-bottom: 16px; }
.bridal-party tbody tr:nth-child(even) { background: #ede8d845; }
.bridal-party td { padding-block: 10px; }
.details { position: relative; padding-top: 43px; padding-bottom: 46px; background: linear-gradient(120deg, #f3e9df80, #fcf9f2 50%, #f0f1e8); }
.details-grid { position: relative; overflow: hidden; background: var(--paper); border: 1px solid #c6aa7980; border-radius: 120px 120px 4px 4px / 60px 60px 4px 4px; padding: 32px 0 26px; box-shadow: 0 12px 35px #80634610; }
.details-grid::before { content: ''; position: absolute; inset: 7px; border: 1px solid #d5c29d80; border-radius: inherit; pointer-events: none; }
.date-panel, .venue-panel { position: relative; padding: 18px 28px; }
.date-panel { border-right: 1px dashed #baa47775; }
.date-rings { width: 56px; color: var(--gold); margin: 0 auto 16px; }
.date-rings svg { display: block; width: 100%; }
.calendar-day { width: 165px; border: 1px solid #cfb68880; border-radius: 85px 85px 3px 3px; padding: 22px 10px 16px; background: linear-gradient(#fbf5e9, #fffdf8); margin-top: 16px; }
.calendar-day strong { color: var(--gold); font-size: 98px; line-height: 1; }
.calendar-day span { font-size: 10px; letter-spacing: 2px; }
.venue-panel { background: radial-gradient(ellipse at center, #e5eadc55, transparent 70%); }
.venue-panel .flower-mark { color: var(--gold); }
.dress-code { padding-top: 42px; padding-bottom: 45px; background: #f8f5ed; }
.palette { padding: 0 8px; }
.swatch { position: relative; outline: 1px solid #b69b6a75; outline-offset: 5px; border: 2px solid #ffffffa6; box-shadow: inset 0 0 20px #ffffff60, 0 7px 15px #74624818; }
.palette>div>span:last-child { margin-top: 5px; }
.attire-image { padding: 14px; border: 1px solid #c7b38e8c; border-radius: 90px 90px 3px 3px / 28px 28px 3px 3px; background: #fffdf9; box-shadow: 0 10px 30px #73542d0d; }
.attire-image img { border-radius: 72px 72px 0 0 / 19px 19px 0 0; }
.attire-guidance { max-width: 850px; gap: 0; border-block: 1px solid #cbb48b70; padding-block: 19px; }
.attire-guidance p { padding-inline: 28px; }
.attire-guidance p + p { border-left: 1px solid #cbb48b70; }
.attire-guidance strong { font-size: 12px; }
footer { padding-top: 48px; border-top: 1px solid #c28f928c; }
footer::before { content: ''; position: absolute; inset: 12px 12px 0; border: 1px solid #fff7e570; border-bottom: 0; border-radius: 110px 110px 0 0 / 35px 35px 0 0; pointer-events: none; }
footer > p, footer .footer-bottom { position: relative; z-index: 1; }
.footer-flower { width: 235px; opacity: .9; }
.footer-flower-left { left: -45px; }
.footer-flower-right { right: -45px; }
.footer-names { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 12px; color: white; }
.footer-names .footer-person { font-size:1em; }
.footer-date { padding-inline: 16px; }
.footer-bottom { border-color: #fff7e570; }
@keyframes crest-glow { from { box-shadow: 0 0 0 5px #cfb47b70, 0 7px 20px #8d70411a; } to { box-shadow: 0 0 0 5px #cfb47b40, 0 5px 27px #b18a4d40; } }
@media (prefers-reduced-motion:no-preference) {
  .hero-inner > .monogram-crest { animation: arrive 1s ease backwards, crest-glow 3.5s ease-in-out 1s infinite alternate; }
  
  .hero-inner > .hero-opening, .hero-inner > .hero-intro { animation-delay: .2s; }
  .swatch { transition: transform .3s ease, box-shadow .3s ease; }
}
@media (hover:hover) {
  .palette > div:hover .swatch { transform: translateY(-5px) rotate(0); box-shadow: inset 0 0 20px #ffffff60, 0 12px 18px #74624825; }
  .hero .button:hover { color: white; background: var(--rust); }
}
@media (max-width:800px) {
  .hero { padding: 24px 4% 28px; }
  .hero-inner { padding-inline: 35px; }
  .couple { font-size: clamp(38px, 5.4vw, 53px); }
  .paper-flower-left, .paper-flower-right { width: 165px; opacity: .48; }
}
@media (max-width:640px) {
  .hero { padding: 20px 12px 23px; background-size: auto 100%; }
  .hero-inner { padding: 24px 18px 29px; border-radius: 100px 100px 3px 3px / 50px 50px 3px 3px; background: #fffcf5f0; box-shadow: 0 10px 30px #684b3314, inset 0 0 0 5px #fffaf1, inset 0 0 0 6px #c9ae796b; }
  .hero-inner::after { inset: 11px; }
  .monogram-crest { width: 65px; height: 65px; padding: 8px; margin-bottom: 18px; }
  
  .hero-opening { font-size: 10px; letter-spacing: 1.2px; margin-top: 20px; }
  .hero-intro { max-width: 300px; font-size: 21px; line-height: 1.4; }
  .hero-request { font-size: 10px; letter-spacing: .8px; line-height: 1.85; margin-top: 22px; }
  .invitation-date { grid-template-columns: 1fr 62px 1fr; column-gap: 8px; max-width: 310px; margin-top: 23px; }
  .invitation-date .date-weekday,.invitation-date .date-hour { font-size: 9px; letter-spacing: .3px; padding-block: 10px; white-space: nowrap; }
  .invitation-date strong { font-size: 50px; }
  .invitation-date .date-month,.invitation-date .date-year { font-size: 10px; letter-spacing: 1px; }
  .hero-address { font-size: 19px; line-height: 1.55; margin-top: 22px; }
  .couple { font-size: clamp(25px, 7.8vw, 45px); line-height: 1.4; gap: 11px; margin-top: 19px; }
  .couple > span:not(.couple-amp) { white-space:nowrap; }
  .couple .couple-amp { font-size: 27px; gap: 15px; }
  .couple-amp::before, .couple-amp::after { width: 37px; }
  .hero-date { flex-wrap: wrap; column-gap: 7px; row-gap: 2px; margin-top: 20px; }
  .hero-date strong { padding: 7px; font-size: 10px; }
  .hero-venue { font-size: 22px; margin-top: 13px; }
  .hero .button { font-size: 13px; padding-inline: 17px; margin-top: 20px; }
  .celebration-ribbon { gap: 20px; padding: 23px 20px; }
  .celebration-ribbon p { font-size: 24px; }
  .celebration-ribbon p span { font-size: 28px; }
  .ribbon-rings { width: 60px; flex-basis: 60px; }
  .ribbon-line { display: none; }
  .blessing { padding: 30px 18px; }
  .blessing-card { padding: 29px 22px 25px; border-radius: 90px 90px 3px 3px / 45px 45px 3px 3px; }
  .blessing-card .script { font-size: 36px; }
  .blessing blockquote { font-size: 27px; }
  .verse-reference { font-size: 9px; letter-spacing: 1.5px; margin-top: 17px; }
  .blessing-flower-left, .blessing-flower-right { width: 160px; top: 30px; opacity: .5; }
  .blessing-flower-left { left: -80px; }
  .blessing-flower-right { right: -80px; }
  .entourage { padding: 33px 12px 32px; }
  .section-intro { padding-inline: 8px; }
  .section-intro .eyebrow { font-size: 10px; letter-spacing: 1.2px; gap: 9px; }
  .section-intro .eyebrow::before, .section-intro .eyebrow::after { width: 22px; }
  .entourage-paper { padding: 23px 16px 26px; border-radius: 68px 68px 0 0; }
  .paper-flower-left, .paper-flower-right { width: 102px; opacity: .55; }
  .paper-flower-left { left: -20px; }
  .paper-flower-right { right: -20px; }
  .paper-crest { width: 51px; margin-bottom: 24px; }
  .paper-title { font-size:clamp(21px,5.6vw,31px); letter-spacing:.2px; white-space:nowrap; margin-bottom:24px; }
  .entourage-paper .role-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
  .entourage-paper .role-grid.two .names { font-size:clamp(16px,4.5vw,23px); line-height:1.65; }
  .entourage-paper .names li + li { margin-top:8px; }
  .parents h3 { font-size: 13px; line-height: 1.5; letter-spacing: .35px; }
  .entourage-paper .pairs li { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; font-size:clamp(16px,4.5vw,23px); line-height:1.65; padding:9px 0; }
  .entourage-paper .pairs li + li { margin-top:0; }
  .honor-attendants .role h3 { font-size:clamp(10px,2.8vw,14px); letter-spacing:.4px; }
  .paired-role + .paired-role { margin-top:22px; }
  .bridal-party th { font-size: 13px; letter-spacing: .35px; padding: 0 5px 14px; }
  .bridal-party td { padding:10px 6px; font-size:clamp(16px,4.5vw,23px); line-height:1.65; }
  .details { padding: 32px 18px; }
  .details-grid { border-radius: 90px 90px 3px 3px / 45px 45px 3px 3px; padding: 21px 0 0; }
  .date-panel { border-right: 0; border-bottom: 1px dashed #baa47775; padding: 12px 20px 29px; }
  .venue-panel { padding: 28px 19px 30px; }
  .date-rings { width: 48px; margin-bottom: 15px; }
  .calendar-day { width: 150px; padding-top: 20px; }
  .calendar-day strong { font-size: 88px; }
  .dress-code { padding: 31px 15px 32px; }
  .palette { padding-inline: 3px; gap: 6px; margin-top: 30px; margin-bottom: 28px; }
  .swatch { outline-offset: 3px; }
  .attire-image { padding: 6px; border-radius: 40px 40px 3px 3px / 18px 18px 3px 3px; }
  .attire-image img { border-radius: 33px 33px 0 0 / 12px 12px 0 0; }
  .attire-guidance p { padding-inline: 12px; }
  .attire-guidance strong { font-size: 10px; }
  footer { padding-top: 40px; }
  footer::before { inset: 9px 9px 0; }
  footer > p:first-of-type { font-size: 29px; }
  .footer-flower { width: 115px; opacity: .8; }
  .footer-flower-left { left: -31px; }
  .footer-flower-right { right: -31px; }
  .footer-names { flex-direction:column; flex-wrap:nowrap; gap:2px; font-size:clamp(26px,7.7vw,43px); }
  .footer-names .footer-person { white-space:nowrap; }
}