:root{
  --blue:#8C9DAD;--blue-deep:#596A78;--ink:#4F5A62;--ivory:#F4F0E8;--ivory-deep:#E9E2D7;
  --white:#FBF9F5;--line:rgba(89,106,120,.23);--serif:"Cormorant Garamond",Georgia,serif;
  --display:"Italiana",Georgia,serif;--sans:"Montserrat",Arial,sans-serif;--shadow:0 24px 80px rgba(64,72,80,.09)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--ivory);font-family:var(--serif);font-size:18px;line-height:1.65}body.locked{overflow:hidden}a{color:inherit}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.paper-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.2;background-image:radial-gradient(circle at 20% 30%,rgba(65,73,78,.12) 0 .55px,transparent .7px),radial-gradient(circle at 80% 60%,rgba(255,255,255,.75) 0 .7px,transparent .85px);background-size:7px 7px,9px 9px;mix-blend-mode:multiply}
.eyebrow,.date-line{font-family:var(--sans);font-size:.69rem;font-weight:600;letter-spacing:.31em;text-transform:uppercase}.date-line{letter-spacing:.23em}.countdown-phrase{font-style:italic;color:var(--blue-deep);font-size:1.1rem}.lead{font-size:1.35rem}.centered{text-align:center}.narrow{max-width:680px;margin-left:auto;margin-right:auto}
.button{display:inline-block;border:1px solid var(--blue-deep);background:transparent;color:var(--blue-deep);padding:.8rem 1.7rem;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:.25s ease}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--blue-deep);color:var(--white)}.button.secondary:hover{background:var(--blue-deep);color:var(--white)}
.opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--ivory);transition:opacity 1.4s ease,visibility 1.4s ease}.opening.leave{opacity:0;visibility:hidden}.opening-inner{width:min(92vw,760px);min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1rem}.opening-monogram{display:flex;align-items:center;gap:.25rem;color:var(--blue-deep);font-family:var(--display);font-size:clamp(4.7rem,15vw,9rem);line-height:.75;opacity:0;transform:scale(.92);animation:assemble 1.5s 1.05s forwards cubic-bezier(.2,.8,.2,1)}.opening-monogram .amp{font-family:var(--serif);font-style:italic;font-size:.42em;margin:0 .05em}.stroke-cloud{position:relative;width:280px;height:60px;margin-bottom:-30px}.stroke{position:absolute;display:block;width:85px;height:1px;background:var(--blue);opacity:0;transform-origin:center;animation:flutter 1.7s forwards cubic-bezier(.2,.8,.2,1)}.s1{left:0;top:28px;transform:rotate(14deg);animation-delay:.08s}.s2{left:45px;top:5px;transform:rotate(-23deg);animation-delay:.22s}.s3{left:95px;top:35px;transform:rotate(31deg);animation-delay:.34s}.s4{left:145px;top:10px;transform:rotate(-8deg);animation-delay:.46s}.s5{left:190px;top:38px;transform:rotate(24deg);animation-delay:.58s}.s6{left:120px;top:22px;transform:rotate(-38deg);animation-delay:.70s}@keyframes flutter{0%{opacity:0;filter:blur(5px);translate:0 -35px;scale:.55}45%{opacity:.75}100%{opacity:.05;filter:blur(0);translate:0 0;scale:1}}@keyframes assemble{to{opacity:1;transform:scale(1)}}
.opening h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7vw,4.7rem);margin:.25rem 0 .55rem}.opening h1 span{font-family:var(--serif);font-style:italic}.opening-copy{font-size:1.35rem;margin:.15rem 0 1.1rem}.opening-welcome{margin-top:2.4rem}.tiny-note{font-family:var(--sans);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-top:1.25rem}
.site-header{position:sticky;top:0;z-index:100;padding:1rem 1.3rem;display:flex;justify-content:flex-end;pointer-events:none}.monogram-button{pointer-events:auto;width:62px;height:62px;border:1px solid var(--line);border-radius:50%;background:rgba(244,240,232,.88);backdrop-filter:blur(12px);color:var(--blue-deep);font-family:var(--display);font-size:1.25rem;cursor:pointer;box-shadow:0 8px 30px rgba(64,72,80,.06)}.small-amp{font-family:var(--serif);font-style:italic;font-size:.7em}.site-nav{pointer-events:auto;position:absolute;right:1.3rem;top:5.4rem;width:min(330px,calc(100vw - 2.6rem));background:rgba(244,240,232,.97);backdrop-filter:blur(18px);border:1px solid var(--line);padding:1.4rem;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s ease}.site-nav.open{opacity:1;visibility:visible;transform:none}.site-nav a{display:block;text-decoration:none;padding:.62rem .2rem;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:.69rem;letter-spacing:.15em;text-transform:uppercase}
main{margin-top:-94px}.section{width:min(1180px,92vw);margin:0 auto;padding:8rem 0}.bordered{border-top:1px solid var(--line)}.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding-top:10rem}.hero-copy{text-align:center}.hero-monogram{font-family:var(--display);font-size:clamp(4rem,9vw,8rem);color:var(--blue-deep);line-height:1}.hero-monogram span{font-family:var(--serif);font-style:italic;font-size:.55em}.hero h2,.section h2,.gate-card h1,.post-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.04;margin:.45rem 0 1rem}.text-link{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}.photo-placeholder{min-height:460px;border:1px solid var(--line);display:grid;place-items:center;background:linear-gradient(135deg,rgba(140,157,173,.12),rgba(255,255,255,.25));color:rgba(79,90,98,.55);font-family:var(--sans);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase}.photo-placeholder.large{min-height:650px}.photo-placeholder.tall{min-height:520px}
.section-heading{text-align:center;max-width:760px;margin:0 auto 4rem}.timeline{max-width:820px;margin:0 auto}.timeline-item{display:grid;grid-template-columns:130px 1fr;gap:2rem;padding:2rem 0;border-top:1px solid var(--line)}.timeline-item:last-child{border-bottom:1px solid var(--line)}.timeline-item .time{font-family:var(--display);font-size:1.55rem;color:var(--blue-deep);margin:.2rem 0}.timeline-item h3,.two-col h3,.card h3,.rsvp-card h3{font-family:var(--display);font-weight:400;font-size:1.65rem;margin:0}.timeline-item p{margin:.2rem 0}
.story-section{max-width:960px}.story-line{position:relative;padding-left:2.4rem}.story-line:before{content:"";position:absolute;left:.5rem;top:.2rem;bottom:.2rem;width:1px;background:var(--blue)}.story-line article{position:relative;padding:0 0 3.8rem 1.5rem}.story-line article:before{content:"";position:absolute;left:-2.25rem;top:.35rem;width:11px;height:11px;border-radius:50%;background:var(--ivory);border:1px solid var(--blue-deep)}.story-line time{font-family:var(--sans);font-size:.65rem;letter-spacing:.18em;color:var(--blue-deep)}.story-line h3{font-family:var(--display);font-weight:400;font-size:2rem;margin:.2rem 0}.story-line p{margin:0}.final-story h3{color:var(--blue-deep)}.mini-photo{float:right;width:190px;height:150px;margin:0 0 1rem 2rem;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.card{border:1px solid var(--line);padding:2rem;min-height:220px;background:rgba(255,255,255,.12)}.swatch-row{display:flex;align-items:center;gap:.8rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;margin-top:2rem}.swatch{width:42px;height:42px;border-radius:50%;background:#8C9DAD;border:5px solid rgba(255,255,255,.45);box-shadow:0 0 0 1px var(--line)}.quote-card{min-height:420px;border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:2rem;background:rgba(140,157,173,.08)}.quote-card p{font-family:var(--display);font-size:2.2rem;max-width:340px}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.faq-list{max-width:820px;margin:0 auto}details{border-top:1px solid var(--line);padding:1.1rem 0}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-family:var(--display);font-size:1.45rem}details p{padding-right:2rem}
.rsvp-section{max-width:900px}.rsvp-card,.contact-form{width:min(760px,100%);margin:0 auto;border:1px solid var(--line);padding:clamp(1.3rem,4vw,3rem);background:rgba(255,255,255,.16);box-shadow:var(--shadow)}.field{margin-bottom:1.3rem}label{display:block;font-family:var(--sans);font-size:.67rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.45rem}input,select,textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.22);padding:.8rem;color:var(--ink);outline:none}textarea{resize:vertical}.check{display:flex;gap:.7rem;align-items:flex-start;text-transform:none;letter-spacing:.03em;font-family:var(--serif);font-size:1rem;font-weight:400}.check input{width:auto;margin-top:.35rem}.field-note{font-size:.82rem;color:rgba(79,90,98,.72)}.form-message{font-style:italic;color:var(--blue-deep)}.contact-form{display:grid;gap:1rem}.contact-form .button{justify-self:center}.guest-stack{display:grid;gap:1.3rem;margin:2rem 0}.guest-rsvp{border:1px solid var(--line);padding:1.4rem;background:rgba(244,240,232,.48)}.guest-title{display:grid;grid-template-columns:1fr 220px;gap:1rem;align-items:end;margin-bottom:1rem}.guest-title h3{font-family:var(--display);font-weight:400;font-size:2rem;margin:.1rem 0}.meal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.spotify-results{display:grid;gap:.3rem;margin-top:.4rem}.spotify-option{display:flex;align-items:center;gap:.7rem;text-align:left;border:1px solid var(--line);background:var(--white);padding:.55rem;cursor:pointer}.spotify-option img{width:44px;height:44px;object-fit:cover}.spotify-option small{display:block;opacity:.7}.transport-status.booked{color:#466b4d}.transport-status.waitlist{color:#896b32}
footer{text-align:center;padding:5rem 1rem 4rem;border-top:1px solid var(--line)}.footer-monogram{font-family:var(--display);font-size:2.4rem;color:var(--blue-deep)}footer p{margin:.25rem}.footer-small{font-family:var(--sans);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase}
.gate-page{min-height:100vh;display:grid;place-items:center;margin:0;padding:2rem}.gate-card{width:min(680px,100%);text-align:center;border:1px solid var(--line);padding:clamp(2rem,7vw,5rem);background:rgba(255,255,255,.16);box-shadow:var(--shadow)}.gate-card .button{margin-top:1rem}.otp-box{display:grid;grid-template-columns:1fr auto;gap:.8rem;margin-top:1rem}
.post-header{padding:2rem;text-align:center}.post-hero{padding-top:10rem}.guest-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.media-card{margin:0;border:1px solid var(--line);background:rgba(255,255,255,.15)}.media-card img,.media-card video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.media-card figcaption{font-family:var(--sans);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;padding:.8rem}.empty-gallery{grid-column:1/-1}
@media(max-width:800px){body{font-size:17px}.section{padding:5.5rem 0}.hero{grid-template-columns:1fr;padding-top:8rem;min-height:auto}.photo-placeholder.large{min-height:480px}.two-col,.cards,.gallery-grid,.guest-media-grid{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr;gap:.2rem}.mini-photo{float:none;width:100%;height:200px;margin:0 0 1rem}.guest-title{grid-template-columns:1fr}.meal-grid{grid-template-columns:1fr}.otp-box{grid-template-columns:1fr}}



/* --- refinement update: stronger florals, consistent ampersands, realistic botanical tortoises --- */
.wedding-amp,
.opening-monogram .amp,
.hero-monogram span,
.small-amp,
h1 .wedding-amp,
h2 .wedding-amp,
h3 .wedding-amp,
.footer-monogram .wedding-amp,
.site-nav .wedding-amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(.04em);
}
h1 .wedding-amp, h2 .wedding-amp { font-size: .82em; margin: 0 .03em; }

.floral-section { position: relative; isolation: isolate; }
.floral-section > * { position: relative; z-index: 1; }
.floral-section::before,
.floral-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: clamp(190px, 22vw, 320px);
  aspect-ratio: 1 / 1.12;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .54;
  filter: saturate(1.02);
}
.floral-right-corner::after {
  top: 4rem;
  /* Flush with the viewport edge, never past it — see the note on the evening rules. */
  right: max(calc(50% - 50vw + 12px), -68px);
  background-image: url("/static/floral-right.svg");
}
.floral-left-edge::before {
  top: 5.5rem;
  left: max(-6vw, -90px);
  background-image: url("/static/floral-left.svg");
}
.floral-left-soft::before {
  top: 18%;
  left: max(-4vw, -64px);
  background-image: url("/static/floral-left.svg");
  opacity: .46;
}
.floral-right-soft::after {
  top: 15%;
  right: max(calc(50% - 50vw + 12px), -64px);
  background-image: url("/static/floral-right.svg");
  opacity: .46;
}

.arrival-note {
  margin-top: .85rem !important;
  padding: .9rem 1rem;
  border-left: 2px solid rgba(89,106,120,.55);
  background: rgba(140,157,173,.11);
  color: var(--blue-deep);
  font-style: italic;
}

.tortoise-story { min-height: 260px; }
.tortoise-illustration {
  float: right;
  width: min(360px, 46%);
  margin: -.6rem 0 1.1rem 2.1rem;
  text-align: center;
}
.tortoise-illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.tortoise-illustration figcaption {
  margin-top: .35rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--blue-deep);
}

@media(max-width:800px){
  .floral-section::before,
  .floral-section::after { width: 185px; opacity: .34; }
  .tortoise-illustration { float: none; width: min(360px, 100%); margin: 0 auto 1.2rem; }
}


/* --- The Day fine-line graphics --- */
.timeline .day-segment{
  grid-template-columns:116px 1fr;
  gap:1.5rem;
  align-items:center;
}
.day-graphic{
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(140,157,173,.08);
}
.day-graphic img{
  width:88px;
  height:88px;
  object-fit:contain;
  display:block;
}
.day-time-copy{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:2rem;
  align-items:start;
}
.day-time-copy .time{margin:.2rem 0}
@media(max-width:800px){
  .timeline .day-segment{
    grid-template-columns:76px 1fr;
    gap:1rem;
  }
  .day-graphic{
    width:72px;height:72px;
  }
  .day-graphic img{
    width:62px;height:62px;
  }
  .day-time-copy{
    grid-template-columns:1fr;
    gap:.15rem;
  }
}


/* --- photo styling + refined tortoise panel update --- */
.hero-photo-frame{
  margin:0;
}
.arched-photo{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(116,134,148,.18);
  padding: 16px;
  border-radius: 220px 220px 28px 28px;
  box-shadow: 0 20px 40px rgba(88,103,115,.14);
  overflow: hidden;
  max-width: 420px;
  justify-self: center;
}
.arched-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius: 190px 190px 16px 16px;
  aspect-ratio: 4 / 5;
}

.refined-tortoise-story{
  display:block;
}
.tortoise-panel{
  margin: 1.2rem 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,247,241,.96));
  border: 1px solid rgba(117,138,153,.18);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(91,104,116,.10);
}
.tortoise-panel img{
  width:100%;
  display:block;
  border-radius: 18px;
}

.real-memories{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.memory-card{
  margin:0;
  color: var(--blue-deep);
}
.memory-card figcaption{
  margin-top:.7rem;
  text-align:center;
  font-size:.98rem;
  letter-spacing:.04em;
}
.memory-card .memory-mat{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,240,232,.96));
  padding: 14px 14px 22px;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(89,101,113,.13);
  border: 1px solid rgba(117,138,153,.16);
}
.memory-card img{
  width:100%;
  display:block;
  object-fit:cover;
  border-radius: 10px;
}
.portrait-frame{grid-column: span 4;}
.portrait-frame img{aspect-ratio: 4 / 5;}
.soft-frame{grid-column: span 4;}
.soft-frame .memory-mat{padding: 12px;}
.soft-frame img{aspect-ratio: 1 / 1; border-radius: 22px;}
.postcard-frame{grid-column: span 4;}
.postcard-frame img{aspect-ratio: 4 / 5;}
.postcard-frame.wide{grid-column: 3 / span 8;}
.postcard-frame.wide img{aspect-ratio: 3 / 2;}

@media (max-width: 900px){
  .portrait-frame, .soft-frame, .postcard-frame, .postcard-frame.wide{grid-column: span 12;}
  .arched-photo{max-width: 360px;}
}

/* Slightly larger day graphic area so the carriage illustration reads cleanly */
.day-graphic{
  width: 112px;
  height: 112px;
}
.day-graphic img{
  width: 94px;
  height: 94px;
}



/* --- FAQ flora stability fix ---
   Keep decorative florals anchored in place so expanding/collapsing FAQ
   dropdowns does not make them jump as section height changes. */
.floral-left-soft::before,
.floral-right-soft::after{
  top: 5.5rem !important;
}

#faq.floral-right-soft::after{
  top: 5.5rem !important;
  right: max(-4vw, -64px);
}

#faq{
  overflow: hidden;
}

/* Keep the decorative florals feeling intentional on mobile too. */
@media (max-width: 800px){
  .floral-left-soft::before,
  .floral-right-soft::after,
  #faq.floral-right-soft::after{
    top: 3.75rem !important;
  }
}


/* --- Barney & Phil: original photograph in the same framed stationery style --- */
.tortoise-photo-frame{
  margin:1.25rem 0 0;
  max-width:680px;
}
.tortoise-photo-mat{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(245,240,232,.97));
  padding:14px 14px 22px;
  border:1px solid rgba(117,138,153,.18);
  border-radius:18px;
  box-shadow:0 18px 36px rgba(89,101,113,.13);
}
.tortoise-photo-mat img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid rgba(140,157,173,.12);
}
@media(max-width:800px){
  .tortoise-photo-frame{
    max-width:100%;
  }
}


/* --- Gallery cleanup: couple photos only, no transport reference images --- */
.gallery-three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  align-items:start;
}
.gallery-three .gallery-photo{
  grid-column:auto;
}
.gallery-three .memory-mat{
  min-height:0;
  padding:14px 14px 20px;
}
.gallery-three .memory-mat img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center top;
  border-radius:10px;
}
@media(max-width:800px){
  .gallery-three{
    grid-template-columns:1fr;
  }
}


/* --- Gallery correction: exactly memory1, memory2, memory3 at full card size --- */
#gallery .gallery-three-corrected{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1.6rem !important;
  width:100% !important;
  max-width:1080px !important;
  margin:0 auto !important;
  align-items:start !important;
}
#gallery .gallery-three-corrected .gallery-photo{
  grid-column:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
#gallery .gallery-three-corrected .memory-mat{
  width:100% !important;
  min-height:440px !important;
  padding:14px 14px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(245,240,232,.97)) !important;
  border:1px solid rgba(117,138,153,.18) !important;
  border-radius:18px !important;
  box-shadow:0 18px 36px rgba(89,101,113,.13) !important;
}
#gallery .gallery-three-corrected .memory-mat img{
  display:block !important;
  width:100% !important;
  height:410px !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:10px !important;
}
#gallery .gallery-three-corrected figcaption{
  margin-top:.75rem !important;
  text-align:center !important;
}

@media(max-width:900px){
  #gallery .gallery-three-corrected{
    grid-template-columns:1fr !important;
    max-width:520px !important;
  }
  #gallery .gallery-three-corrected .memory-mat{
    min-height:0 !important;
  }
  #gallery .gallery-three-corrected .memory-mat img{
    height:auto !important;
    max-height:620px !important;
  }
}


/* --- Gallery frame-fit correction ---
   Each photo frame follows the source photo's actual aspect ratio,
   so the image fills the frame without empty bands or cutting off heads. */
#gallery .gallery-three-corrected .memory-mat{
  min-height:0 !important;
  display:block !important;
  padding:14px 14px 20px !important;
}

/* memory1 = tall portrait */
#gallery .gallery-three-corrected .gallery-photo:nth-child(1) .memory-mat img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:7 / 15 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* memory2 = landscape */
#gallery .gallery-three-corrected .gallery-photo:nth-child(2) .memory-mat img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 3 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* memory3 = portrait */
#gallery .gallery-three-corrected .gallery-photo:nth-child(3) .memory-mat img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3 / 4 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

#gallery .gallery-three-corrected .gallery-photo{
  align-self:start !important;
}
#gallery .gallery-three-corrected .memory-mat img{
  display:block !important;
  max-height:none !important;
  border-radius:10px !important;
}

@media(max-width:900px){
  #gallery .gallery-three-corrected .memory-mat img{
    max-height:none !important;
  }
}


/* --- Barney & Phil size adjustment: 25% smaller --- */
.tortoise-photo-frame{
  max-width:510px !important; /* 75% of the previous 680px width */
}


/* --- Mobile-first "The Day" layout refinement ---
   On phones, stop squeezing icon + time + event copy into one narrow row.
   The icon and time form a clean top line, with the event details using
   the full width underneath. */
@media (max-width: 800px){

  #day .timeline,
  #evening .timeline{
    width:100%;
    max-width:none;
  }

  #day .timeline .day-segment,
  #evening .timeline .day-segment{
    display:grid !important;
    grid-template-columns:88px minmax(0,1fr) !important;
    grid-template-areas:
      "graphic time"
      "copy    copy" !important;
    column-gap:1.15rem !important;
    row-gap:.95rem !important;
    align-items:center !important;
    padding:2.15rem .15rem 2.35rem !important;
  }

  #day .day-segment .day-graphic,
  #evening .day-segment .day-graphic{
    grid-area:graphic !important;
    width:82px !important;
    height:82px !important;
    margin:0 !important;
    align-self:center !important;
    justify-self:start !important;
  }

  #day .day-segment .day-graphic img,
  #evening .day-segment .day-graphic img{
    width:70px !important;
    height:70px !important;
    object-fit:contain !important;
  }

  /* Flatten the wrapper so its time and copy can occupy separate grid areas. */
  #day .day-segment .day-time-copy,
  #evening .day-segment .day-time-copy{
    display:contents !important;
  }

  #day .day-segment .day-time-copy > .time,
  #evening .day-segment .day-time-copy > .time{
    grid-area:time !important;
    align-self:center !important;
    margin:0 !important;
    font-size:1.42rem !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }

  #day .day-segment .day-time-copy > div,
  #evening .day-segment .day-time-copy > div{
    grid-area:copy !important;
    min-width:0 !important;
    width:100% !important;
    padding-left:.1rem !important;
  }

  #day .day-segment h3,
  #evening .day-segment h3{
    margin:0 0 .45rem !important;
    font-size:1.72rem !important;
    line-height:1.12 !important;
  }

  #day .day-segment p:not(.time),
  #evening .day-segment p:not(.time){
    font-size:1rem !important;
    line-height:1.55 !important;
  }

  #day .day-segment .arrival-note,
  #evening .day-segment .arrival-note{
    margin-top:.85rem !important;
    padding:.9rem 1rem !important;
    width:100% !important;
  }

  /* Give each event a little more breathing room from the divider. */
  #day .timeline-item + .timeline-item,
  #evening .timeline-item + .timeline-item{
    margin-top:.15rem !important;
  }
}

/* Extra-tight phones */
@media (max-width: 390px){
  #day .timeline .day-segment,
  #evening .timeline .day-segment{
    grid-template-columns:76px minmax(0,1fr) !important;
    column-gap:.9rem !important;
    padding-top:1.9rem !important;
    padding-bottom:2.1rem !important;
  }

  #day .day-segment .day-graphic,
  #evening .day-segment .day-graphic{
    width:72px !important;
    height:72px !important;
  }

  #day .day-segment .day-graphic img,
  #evening .day-segment .day-graphic img{
    width:62px !important;
    height:62px !important;
  }

  #day .day-segment .day-time-copy > .time,
  #evening .day-segment .day-time-copy > .time{
    font-size:1.3rem !important;
  }

  #day .day-segment h3,
  #evening .day-segment h3{
    font-size:1.6rem !important;
  }
}


/* --- Flora transparency adjustment ---
   Set decorative florals to roughly 80% transparent (about 20% opacity). */
.floral-left-soft::before,
.floral-right-soft::after,
#faq.floral-right-soft::after{
  opacity: 0.20 !important;
}


/* --- Flora transparency adjustment override ---
   Set decorative florals to roughly 70% transparent (about 30% opacity). */
.floral-left-soft::before,
.floral-right-soft::after,
#faq.floral-right-soft::after{
  opacity: 0.30 !important;
}


/* =========================================================
   August 2026 bundled refinement
   Taxis, dress-code watercolour, Spotify lookup polish
   ========================================================= */

/* Keep Barney & Phil visually tight while retaining the site ampersand style. */
.refined-tortoise-story h3 .wedding-amp{
  margin-left:.04em !important;
  margin-right:.10em !important;
}

/* Taxi cards */
.taxi-section{
  text-align:center;
}
.taxi-grid{
  width:min(980px,100%);
  margin:2.2rem auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.taxi-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.18);
  padding:1.8rem 1.4rem;
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(89,101,113,.07);
}
.taxi-card h3{
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
  margin:.15rem 0 .35rem;
}
.taxi-card p{
  margin:.2rem 0;
}
.taxi-phone{
  display:inline-block;
  margin:.75rem 0 .25rem;
  padding:.62rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--blue-deep);
  text-decoration:none;
  background:rgba(140,157,173,.08);
}
.taxi-phone:hover{
  background:rgba(140,157,173,.16);
}
.taxi-note{
  width:min(820px,100%);
  margin:1.4rem auto 0;
  font-size:.88rem;
  opacity:.78;
}

/* Approved watercolour dress-code artwork */
.dress-code-section{
  align-items:center;
}
.dress-code-art{
  margin:0;
  width:min(520px,100%);
  justify-self:center;
  text-align:center;
  padding:1rem 1rem 1.2rem;
  border:1px solid rgba(117,138,153,.18);
  background:rgba(255,255,255,.14);
  box-shadow:0 18px 38px rgba(89,101,113,.09);
}
.dress-code-art img{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.dress-code-art figcaption{
  margin-top:.65rem;
  font-family:var(--display);
  font-size:1.25rem;
  color:var(--blue-deep);
  letter-spacing:.02em;
}

/* Spotify song lookup */
.spotify-field{
  position:relative;
}
.spotify-search-shell{
  position:relative;
}
.spotify-results{
  position:relative;
  z-index:5;
  display:grid;
  gap:.45rem;
  margin-top:.5rem;
}
.spotify-option{
  width:100%;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:.75rem !important;
  align-items:center;
  text-align:left;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.82) !important;
  padding:.6rem !important;
  cursor:pointer;
  color:var(--ink);
}
.spotify-option img{
  width:52px !important;
  height:52px !important;
  border-radius:6px;
  object-fit:cover;
}
.spotify-option strong,
.spotify-option small{
  display:block;
}
.spotify-option small{
  margin-top:.12rem;
  opacity:.7;
}
.spotify-open{
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue-deep);
  white-space:nowrap;
}
.spotify-message{
  padding:.65rem .15rem;
  font-size:.86rem;
  font-style:italic;
  opacity:.75;
}
.spotify-selected{
  margin-top:.65rem;
  padding:.65rem .75rem;
  border-left:2px solid var(--blue);
  background:rgba(140,157,173,.07);
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  align-items:center;
}
.spotify-selected-text{
  font-size:.9rem;
}
.spotify-clear{
  width:auto;
  border:0;
  background:transparent;
  color:var(--blue-deep);
  text-decoration:underline;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.7rem;
}

/* Mobile refinement */
@media(max-width:800px){
  .taxi-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }
  .taxi-card{
    min-height:0;
    padding:1.45rem 1.2rem;
  }
  .dress-code-section{
    gap:2.5rem !important;
  }
  .dress-code-art{
    width:min(430px,94vw);
    padding:.7rem .7rem 1rem;
  }
  .dress-code-art img{
    max-height:none;
  }
  .spotify-option{
    grid-template-columns:48px minmax(0,1fr);
  }
  .spotify-option img{
    width:48px !important;
    height:48px !important;
  }
  .spotify-open{
    grid-column:2;
    justify-self:start;
  }
}


/* =========================================================
   Dress-code integration + Spotify preview refinement
   ========================================================= */

/* The watercolour is now visually part of the page rather than a framed image. */
.dress-code-art{
  display:none !important;
}
.dress-code-visual{
  position:relative;
  width:min(560px,100%);
  margin:0 auto;
  text-align:center;
  overflow:visible;
}
.dress-code-watercolour{
  display:block;
  width:100%;
  height:auto;
  max-height:650px;
  object-fit:contain;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  mix-blend-mode:multiply;
  opacity:.96;
  /* Fade the paper-coloured edges into the site's own ivory paper. */
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 49%, #000 58%, rgba(0,0,0,.96) 72%, transparent 100%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 49%, #000 58%, rgba(0,0,0,.96) 72%, transparent 100%);
}
.dress-code-tagline{
  margin:-.25rem auto 0;
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.22em;
  font-family:var(--display);
  color:var(--blue-deep);
  font-size:clamp(1.28rem,2.2vw,1.85rem);
  line-height:1.2;
  letter-spacing:.015em;
}
.dress-code-tagline::before,
.dress-code-tagline::after{
  content:"";
  width:clamp(30px,5vw,64px);
  height:1px;
  margin:0 .45rem .28em;
  background:linear-gradient(90deg,transparent,rgba(101,126,145,.62));
}
.dress-code-tagline::after{
  background:linear-gradient(90deg,rgba(101,126,145,.62),transparent);
}
.dress-code-tagline span{
  font-style:italic;
}
.dress-code-tagline i{
  font-family:var(--display);
  font-style:normal;
  opacity:.62;
}

/* Spotify selected-song preview */
.spotify-preview{
  margin-top:.7rem;
}
.spotify-preview-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:.8rem;
  align-items:center;
  padding:.72rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.32);
}
.spotify-preview-card img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:7px;
}
.spotify-preview-copy strong,
.spotify-preview-copy small{
  display:block;
}
.spotify-preview-copy small{
  margin-top:.15rem;
  opacity:.7;
}
.spotify-preview-button{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(101,126,145,.35);
  background:rgba(140,157,173,.12);
  color:var(--blue-deep);
  cursor:pointer;
  font-size:1rem;
}
.spotify-preview-message{
  font-size:.82rem;
  opacity:.75;
  font-style:italic;
}
.spotify-embed-wrap{
  margin-top:.65rem;
  overflow:hidden;
  border-radius:12px;
}
.spotify-embed-wrap iframe{
  display:block;
  width:100%;
  height:152px;
  border:0;
}

@media(max-width:800px){
  .dress-code-visual{
    width:min(440px,96vw);
  }
  .dress-code-watercolour{
    max-height:none;
  }
  .dress-code-tagline{
    margin-top:-.6rem;
    padding:0 .6rem;
  }
  .dress-code-tagline::before,
  .dress-code-tagline::after{
    width:28px;
    margin-left:.18rem;
    margin-right:.18rem;
  }
  .spotify-preview-card{
    grid-template-columns:52px minmax(0,1fr) auto;
  }
  .spotify-preview-card img{
    width:52px;
    height:52px;
  }
}

/* memory4-new gallery fit — preserve the portrait snapshot cleanly */
#gallery .gallery-three-corrected .gallery-photo:nth-child(4) .memory-mat{
  aspect-ratio:auto !important;
  overflow:hidden !important;
}

#gallery .gallery-three-corrected .gallery-photo:nth-child(4) .memory-mat img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}


/* wedding-allergen-checkboxes */
.allergen-field{
  border:0;
  padding:0;
  margin:0 0 1.6rem;
  min-width:0;
}
.allergen-field legend{
  display:block;
  width:100%;
  padding:0;
  margin:0 0 .45rem;
  font-family:var(--sans);
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.allergen-intro{
  margin:.1rem 0 1rem;
}
.allergen-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem .7rem;
}
.allergen-option{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0;
  padding:.72rem .8rem;
  min-height:48px;
  border:1px solid rgba(140,157,173,.26);
  border-radius:10px;
  background:rgba(255,255,255,.18);
  font-family:var(--serif);
  font-size:.96rem;
  font-weight:400;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.allergen-option:hover{
  border-color:rgba(101,126,145,.48);
  background:rgba(140,157,173,.08);
}
.allergen-option:has(input:checked){
  border-color:rgba(101,126,145,.58);
  background:rgba(140,157,173,.13);
}
.allergen-option input{
  width:18px !important;
  height:18px;
  flex:0 0 18px;
  margin:0 !important;
  padding:0;
  accent-color:#8C9DAD;
}
.allergen-other{
  margin-top:.7rem;
}
.allergen-other-toggle{
  width:100%;
}
.allergen-other-entry{
  margin-top:.75rem;
  padding:.9rem 1rem 1rem;
  border-left:2px solid rgba(101,126,145,.52);
  background:rgba(140,157,173,.055);
}
.allergen-other-entry label{
  margin-bottom:.25rem;
}
.allergen-other-entry input{
  background:rgba(255,255,255,.32);
}
.allergen-field .hidden{
  display:none !important;
}

@media(max-width:600px){
  .allergen-grid{
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .allergen-option{
    min-height:50px;
    padding:.75rem .82rem;
    font-size:1rem;
  }
}

/* dress-image-edge-blend-refinement */
.dress-code-visual{
  isolation:isolate;
}

.dress-code-watercolour{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: multiply;
  opacity: .985;
  filter: saturate(.96) contrast(.99);
  -webkit-mask-image:
    radial-gradient(ellipse 86% 84% at 50% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.985) 63%,
      rgba(0,0,0,.94) 72%,
      rgba(0,0,0,.82) 80%,
      rgba(0,0,0,.58) 88%,
      rgba(0,0,0,.22) 95%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 86% 84% at 50% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.985) 63%,
      rgba(0,0,0,.94) 72%,
      rgba(0,0,0,.82) 80%,
      rgba(0,0,0,.58) 88%,
      rgba(0,0,0,.22) 95%,
      rgba(0,0,0,0) 100%);
}

.dress-code-visual::before{
  content:"";
  position:absolute;
  inset:-2% -1.5%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(248,245,239,0) 52%,
      rgba(248,245,239,.18) 72%,
      rgba(248,245,239,.42) 84%,
      rgba(248,245,239,.78) 93%,
      rgba(248,245,239,1) 100%);
  z-index:2;
  opacity:.88;
}

@media (max-width: 800px){
  .dress-code-visual::before{
    inset:-1.5% -1%;
    opacity:.92;
  }
}

/* dress-image-true-transparent-edges */
/* This uses actual alpha transparency on the artwork edges rather than an ivory overlay. */
.dress-code-visual::before{
  display:none !important;
  content:none !important;
}

.dress-code-visual{
  isolation:auto !important;
}

.dress-code-watercolour{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: multiply;
  filter: saturate(.97) contrast(.99);
  -webkit-mask-image:
    radial-gradient(ellipse 84% 86% at 50% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 56%,
      rgba(0,0,0,.98) 67%,
      rgba(0,0,0,.92) 76%,
      rgba(0,0,0,.75) 84%,
      rgba(0,0,0,.44) 91%,
      rgba(0,0,0,.14) 96%,
      rgba(0,0,0,0) 100%) !important;
  mask-image:
    radial-gradient(ellipse 84% 86% at 50% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 56%,
      rgba(0,0,0,.98) 67%,
      rgba(0,0,0,.92) 76%,
      rgba(0,0,0,.75) 84%,
      rgba(0,0,0,.44) 91%,
      rgba(0,0,0,.14) 96%,
      rgba(0,0,0,0) 100%) !important;
}

@media (max-width: 800px){
  .dress-code-watercolour{
    -webkit-mask-image:
      radial-gradient(ellipse 88% 88% at 50% 50%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,.96) 72%,
        rgba(0,0,0,.78) 84%,
        rgba(0,0,0,.38) 94%,
        rgba(0,0,0,0) 100%) !important;
    mask-image:
      radial-gradient(ellipse 88% 88% at 50% 50%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,.96) 72%,
        rgba(0,0,0,.78) 84%,
        rgba(0,0,0,.38) 94%,
        rgba(0,0,0,0) 100%) !important;
  }
}


/* dress-real-alpha-feather */
.dress-code-visual,
.dress-code-watercolour-wrap,
.dress-code-watercolour{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dress-code-watercolour{
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.dress-code-visual::before{
  display: none !important;
  content: none !important;
}

/* mobile-allergies-2x7 */
@media(max-width:600px){
  .allergen-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.5rem !important;
  }

  .allergen-option{
    min-height:48px !important;
    padding:.58rem .6rem !important;
    gap:.5rem !important;
    font-size:.88rem !important;
    line-height:1.18 !important;
    align-items:center !important;
  }

  .allergen-option input{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
  }

  /* "Other" remains on its own full-width row underneath the 14 allergens. */
  .allergen-other{
    width:100% !important;
    margin-top:.65rem !important;
  }

  .allergen-other-toggle{
    width:100% !important;
    min-height:48px !important;
    font-size:.95rem !important;
  }

  .allergen-other-entry{
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* allergy-other-larger-mobile-box */
.allergen-other-entry .allergen-other-text{
  width:100% !important;
  box-sizing:border-box !important;
  min-height:64px !important;
  resize:vertical;
  line-height:1.35 !important;
}

@media(max-width:600px){
  .allergen-other-entry{
    padding:.9rem .8rem 1rem !important;
  }

  .allergen-other-entry .allergen-other-text{
    min-height:72px !important;
    padding:.72rem .75rem !important;
    font-size:.92rem !important;
    line-height:1.35 !important;
  }
}

/* spotify-duplicate-song-message */
.spotify-duplicate-message{
  margin:.75rem 0 .25rem;
  padding:.9rem 1rem;
  border:1px solid rgba(101,126,145,.34);
  border-left:3px solid #8C9DAD;
  border-radius:10px;
  background:rgba(140,157,173,.10);
  color:var(--blue-deep);
  font-family:var(--serif);
  font-size:.96rem;
  line-height:1.45;
  text-align:left;
}

@media(max-width:600px){
  .spotify-duplicate-message{
    padding:.85rem .9rem;
    font-size:.94rem;
  }
}

/* themed-wedding-travel-map-v2 */
.themed-travel-section{
  align-items:start !important;
}

.travel-location{
  margin:1.65rem 0 0;
  padding:0 0 1.35rem;
  border-bottom:1px solid rgba(140,157,173,.20);
}

.travel-location:last-of-type{
  border-bottom:0;
}

.travel-kicker{
  margin:0 0 .25rem !important;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-deep);
}

.travel-location h3{
  margin:0 0 .35rem !important;
}

.travel-location p{
  margin:.25rem 0;
}

.travel-note{
  margin:1.25rem 0 0;
  padding:1rem 1.1rem;
  border-left:2px solid #8C9DAD;
  background:rgba(140,157,173,.075);
}

.themed-map-panel{
  position:sticky;
  top:7rem;
  overflow:hidden;
  border:1px solid rgba(120,144,162,.26);
  background:rgba(248,245,239,.56);
  box-shadow:0 18px 42px rgba(70,83,94,.08);
}

.wedding-map-header{
  min-height:52px;
  padding:.8rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid rgba(140,157,173,.20);
}

.wedding-map-header span{
  font-family:var(--display);
  font-size:1.25rem;
  color:var(--blue-deep);
}

.wedding-map-header a{
  font-family:var(--sans);
  font-size:.61rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}

.themed-map-shell{
  position:relative;
  overflow:hidden;
  min-height:470px;
  background:#f7f3eb;
}

.themed-wedding-map{
  position:relative;
  width:100%;
  height:470px;
  background:#f7f3eb;
  z-index:1;
}

.themed-wedding-map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:400;
  background:rgba(247,243,235,.05);
  box-shadow:inset 0 0 75px rgba(247,243,235,.26);
}

.themed-wedding-map .leaflet-tile-pane{
  filter:
    grayscale(.72)
    sepia(.12)
    hue-rotate(165deg)
    saturate(.58)
    brightness(1.09)
    contrast(.87);
  opacity:.88;
}

.themed-wedding-map .leaflet-control-zoom{
  border:1px solid rgba(91,113,130,.22) !important;
  box-shadow:0 8px 22px rgba(71,84,95,.10) !important;
}

.themed-wedding-map .leaflet-control-zoom a{
  color:#5f778a !important;
  background:rgba(250,248,243,.95) !important;
  border-bottom-color:rgba(91,113,130,.14) !important;
}

.wedding-map-marker-host{
  background:transparent !important;
  border:0 !important;
}

.wedding-map-pin{
  width:42px;
  height:52px;
  display:grid;
  place-items:start center;
  filter:drop-shadow(0 6px 8px rgba(57,72,84,.14));
}

.wedding-map-pin-drop{
  position:relative;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#7890a2;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 0 1px rgba(91,113,130,.12);
}

.wedding-map-pin-drop::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
}

.wedding-map-pin-drop span{
  position:relative;
  z-index:2;
  transform:rotate(45deg);
  color:#fff;
  font-family:var(--display);
  font-size:1rem;
  font-weight:400;
  line-height:1;
}

.wedding-map-popup-shell .leaflet-popup-content-wrapper{
  border-radius:3px !important;
  background:rgba(250,248,243,.98) !important;
  color:var(--ink) !important;
  box-shadow:0 16px 36px rgba(61,75,87,.14) !important;
  border:1px solid rgba(120,144,162,.23);
}

.wedding-map-popup-shell .leaflet-popup-tip{
  background:rgba(250,248,243,.98) !important;
  box-shadow:none !important;
}

.wedding-map-popup-shell .leaflet-popup-content{
  margin:14px 16px !important;
  min-width:175px;
}

.wedding-map-popup{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.wedding-map-popup-kicker{
  font-family:var(--sans);
  font-size:.57rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#7890a2;
}

.wedding-map-popup strong{
  font-family:var(--display);
  font-size:1.23rem;
  font-weight:400;
  color:var(--blue-deep);
}

.wedding-map-popup a{
  margin-top:.25rem;
  font-family:var(--sans);
  font-size:.63rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-decoration:none;
  color:#657e91;
}

.map-credit{
  position:absolute;
  right:.45rem;
  bottom:.35rem;
  z-index:500;
  padding:.2rem .38rem;
  background:rgba(250,248,243,.80);
  color:rgba(66,79,89,.58);
  font-family:var(--sans);
  font-size:.50rem;
  line-height:1;
  pointer-events:none;
}

.themed-location-list{
  border-top:1px solid rgba(140,157,173,.18);
}

.map-location-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:.7rem;
  align-items:center;
  padding:.8rem 1rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(140,157,173,.14);
  background:rgba(255,255,255,.06);
}

.map-location-item:last-child{
  border-bottom:0;
}

.elegant-list-pin{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(120,144,162,.54);
  border-radius:50%;
  color:#657e91;
  background:rgba(248,245,239,.9);
  font-family:var(--display);
  font-size:.8rem;
}

.map-location-item strong,
.map-location-item small{
  display:block;
}

.map-location-item strong{
  font-family:var(--display);
  font-size:1.02rem;
  font-weight:400;
}

.map-location-item small{
  margin-top:.05rem;
  font-family:var(--sans);
  font-size:.61rem;
  letter-spacing:.035em;
  color:rgba(79,90,98,.70);
}

.wedding-map-fallback{
  min-height:360px;
  height:100%;
  display:grid;
  place-content:center;
  gap:.6rem;
  padding:2rem;
  text-align:center;
}

@media(max-width:800px){
  .themed-travel-section{
    gap:2.3rem !important;
  }

  .themed-map-panel{
    position:relative;
    top:auto;
    width:100%;
  }

  .wedding-map-header{
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
  }

  .themed-map-shell,
  .themed-wedding-map{
    min-height:360px !important;
    height:360px !important;
  }

  .map-location-item{
    padding:.76rem .85rem;
  }
}


/* wedding-map-name-label */
.wedding-map-name-label{
  border:0 !important;
  border-radius:2px !important;
  padding:.26rem .48rem !important;
  background:rgba(249,247,242,.90) !important;
  box-shadow:0 3px 10px rgba(66,79,89,.08) !important;
  color:#526b7e !important;
  font-family:var(--display) !important;
  font-size:.88rem !important;
  font-weight:400 !important;
  line-height:1.05 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}

.wedding-map-name-label::before{
  display:none !important;
}

.themed-wedding-map .leaflet-tooltip{
  pointer-events:none !important;
}

@media(max-width:600px){
  .wedding-map-name-label{
    font-size:.76rem !important;
    padding:.22rem .38rem !important;
  }
}

/* wedding-map-road-visibility-fix */
.themed-wedding-map .leaflet-tile-pane{
  filter:
    grayscale(.28)
    sepia(.06)
    hue-rotate(165deg)
    saturate(.82)
    brightness(1.02)
    contrast(1.04) !important;
  opacity:1 !important;
}

.themed-wedding-map::after{
  background:rgba(247,243,235,.015) !important;
  box-shadow:inset 0 0 48px rgba(247,243,235,.12) !important;
}

/* Keep roads and boundaries visible while preserving the ivory/blue-grey theme. */
.themed-map-shell{
  background:#f5f2ec !important;
}


/* wedding-hotels-routes-map-refresh */

/* Stronger map colours: readable roads without bringing back random labels. */
.themed-wedding-map .leaflet-tile-pane{
  filter:
    saturate(.96)
    brightness(.99)
    contrast(1.08)
    sepia(.025) !important;
  opacity:1 !important;
}

.themed-wedding-map::after{
  background:transparent !important;
  box-shadow:inset 0 0 42px rgba(247,243,235,.10) !important;
}

.map-view-controls{
  display:flex;
  gap:.45rem;
  padding:.65rem .8rem;
  border-bottom:1px solid rgba(120,144,162,.18);
  background:rgba(249,247,242,.76);
}

.map-view-button{
  width:auto;
  min-height:36px;
  padding:.45rem .75rem;
  border:1px solid rgba(101,126,145,.28);
  border-radius:999px;
  background:rgba(255,255,255,.42);
  color:#617b8f;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
}

.map-view-button.active{
  color:#fff;
  background:#6f899d;
  border-color:#6f899d;
}

.map-route-legend{
  position:absolute;
  left:.7rem;
  bottom:.65rem;
  z-index:550;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .75rem;
  max-width:calc(100% - 5.5rem);
  padding:.48rem .6rem;
  border:1px solid rgba(101,126,145,.18);
  background:rgba(250,248,243,.91);
  box-shadow:0 6px 18px rgba(63,77,89,.08);
  font-family:var(--sans);
  font-size:.56rem;
  line-height:1.15;
  color:#536a7a;
}

.map-route-legend span{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.map-route-legend i{
  width:24px;
  height:4px;
  display:block;
  border-radius:999px;
  background:var(--route-colour);
}

.map-route-legend .hotel-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#7d8a72;
}

.route-hover-label{
  border:0 !important;
  background:rgba(250,248,243,.96) !important;
  color:#506879 !important;
  font-family:var(--sans) !important;
  font-size:.64rem !important;
  box-shadow:0 5px 15px rgba(64,78,90,.12) !important;
}

.wedding-hotel-marker-host{
  background:transparent !important;
  border:0 !important;
}

.wedding-hotel-pin{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:#7d8a72;
  color:#fff;
  box-shadow:
    0 5px 12px rgba(56,70,78,.16),
    0 0 0 1px rgba(91,107,95,.18);
}

.wedding-hotel-pin span{
  font-family:var(--display);
  font-size:.9rem;
  line-height:1;
}

.hotel-map-popup .hotel-popup-date{
  margin:.2rem 0 .15rem;
  font-family:var(--sans);
  font-size:.59rem;
  color:rgba(72,85,95,.68);
}

/* Hotel cards */
.accommodation-section{
  text-align:center;
}

.hotel-date-note{
  width:min(800px,100%);
  margin:1rem auto 0;
  font-size:.9rem;
  color:rgba(64,76,85,.78);
}

.hotel-grid{
  width:min(1080px,100%);
  margin:2.2rem auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  text-align:left;
}

.hotel-card{
  padding:1.55rem 1.6rem;
  border:1px solid rgba(120,144,162,.22);
  background:rgba(255,255,255,.14);
  box-shadow:0 14px 32px rgba(72,85,96,.06);
}

.hotel-tier{
  margin:0 0 .4rem !important;
  font-family:var(--sans);
  font-size:.59rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#718a9d;
}

.hotel-card h3{
  margin:.05rem 0 .25rem !important;
  font-size:1.55rem;
}

.hotel-address{
  margin:0 0 .8rem !important;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.025em;
  color:rgba(65,77,86,.68);
}

.hotel-rate-row{
  margin-top:1.1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(120,144,162,.15);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}

.hotel-rate-label{
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(65,77,86,.64);
}

.hotel-live-rate{
  font-family:var(--display);
  font-size:1.08rem;
  font-weight:400;
  color:#526f84;
  text-align:right;
}

.hotel-live-rate[data-status="live"]{
  color:#536f63;
}

.hotel-live-link{
  display:inline-block;
  margin-top:.65rem;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}

.hotel-disclaimer{
  width:min(850px,100%);
  margin:1.4rem auto 0;
  font-size:.82rem;
  opacity:.72;
}

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

  .hotel-card{
    padding:1.35rem 1.25rem;
  }

  .map-route-legend{
    left:.5rem;
    right:4.1rem;
    bottom:.5rem;
    max-width:none;
    gap:.38rem .6rem;
    font-size:.53rem;
  }

  .map-view-controls{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .map-view-button{
    flex:0 0 auto;
    min-height:40px;
  }
}

/* plus-one-faq-readability */
.faq-plus-one-answer{
  color:#3f4f5b !important;
  font-size:1.02rem !important;
  line-height:1.6 !important;
  opacity:1 !important;
}

.plus-one-mark{
  display:inline-block;
  padding:.03rem .32rem .05rem;
  margin:0 .06rem;
  border:1px solid rgba(92,118,138,.42);
  border-radius:999px;
  background:rgba(140,157,173,.12);
  color:#4f6a7e;
  font-family:var(--sans);
  font-size:.82em;
  font-weight:700;
  line-height:1.2;
  vertical-align:.06em;
  letter-spacing:.01em;
}

@media(max-width:600px){
  .faq-plus-one-answer{
    font-size:1rem !important;
  }

  .plus-one-mark{
    font-size:.86em;
    padding:.04rem .34rem .06rem;
  }
}

/* RSVP_VIDEO_CONFIRMATION_START */
.rsvp-video-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.rsvp-video-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.rsvp-video-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#050505;
}
.rsvp-confirmation-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#050505;
}
.rsvp-confirmation-end-card{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  padding:clamp(2rem,7vw,6rem);
  overflow:hidden;
  color:#FBF9F5;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.13), transparent 38%),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.07), transparent 32%),
    linear-gradient(145deg,#94A5B4 0%,#8C9DAD 48%,#7F91A2 100%);
  opacity:0;
  visibility:hidden;
  transition:opacity .48s ease, visibility .48s ease;
}
.rsvp-confirmation-end-card::before,
.rsvp-confirmation-end-card::after{
  content:"";
  position:absolute;
  width:clamp(250px,36vw,560px);
  aspect-ratio:1 / 1.12;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.16;
  filter:brightness(0) invert(1);
  pointer-events:none;
}
.rsvp-confirmation-end-card::before{
  left:clamp(-150px,-8vw,-55px);
  bottom:clamp(-150px,-8vw,-55px);
  background-image:url('/static/floral-left.svg');
}
.rsvp-confirmation-end-card::after{
  right:clamp(-150px,-8vw,-55px);
  top:clamp(-150px,-8vw,-55px);
  background-image:url('/static/floral-right.svg');
}
.rsvp-confirmation-end-card.is-visible{
  opacity:1;
  visibility:visible;
}
.rsvp-confirmation-end-copy{
  position:relative;
  z-index:1;
  width:min(880px,88vw);
  text-align:center;
}
.rsvp-confirmation-end-copy::before{
  content:"";
  display:block;
  width:74px;
  height:1px;
  margin:0 auto 1.6rem;
  background:rgba(251,249,245,.62);
}
.rsvp-confirmation-end-copy p{
  margin:0;
  font-family:var(--display,"Italiana",Georgia,serif);
  font-size:clamp(2.55rem,7.2vw,6.4rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.005em;
  text-wrap:balance;
  text-shadow:0 3px 28px rgba(47,58,67,.18);
}
.rsvp-video-skip,
.rsvp-video-play{
  position:absolute;
  z-index:5;
  border:1px solid rgba(251,249,245,.48);
  background:rgba(40,48,55,.38);
  color:#FBF9F5;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--sans,"Montserrat",Arial,sans-serif);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.rsvp-video-skip{
  top:max(1rem,env(safe-area-inset-top));
  right:max(1rem,env(safe-area-inset-right));
  padding:.72rem 1rem;
  border-radius:999px;
}
.rsvp-video-play{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:1rem 1.35rem;
  border-radius:999px;
  background:rgba(89,106,120,.86);
}
.rsvp-video-play[hidden]{display:none!important;}
@media(max-width:800px){
  .rsvp-confirmation-end-copy{width:min(540px,86vw);}
  .rsvp-confirmation-end-copy p{font-size:clamp(2.65rem,12vw,4.6rem);}
  .rsvp-confirmation-end-card::before,
  .rsvp-confirmation-end-card::after{width:280px;opacity:.14;}
  .rsvp-video-skip{font-size:.61rem;padding:.62rem .85rem;}
}
@media(prefers-reduced-motion:reduce){
  .rsvp-video-overlay,.rsvp-confirmation-end-card{transition:none;}
}
/* RSVP_VIDEO_CONFIRMATION_END */


/* =========================================================
   Design polish — September 2026
   ========================================================= */

/* Typography: balanced heading breaks, no orphaned words */
h1,h2,h3,summary{text-wrap:balance}
p{text-wrap:pretty}
.name-pair{white-space:nowrap}

/* Ampersands in tracked uppercase labels were touching the next word */
.eyebrow .wedding-amp,
.site-nav .wedding-amp{margin:0 .38em 0 .06em}
.refined-tortoise-story h3 .wedding-amp{margin-left:0 !important;margin-right:0 !important}

/* Keyboard focus — the base styles removed outlines entirely */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-bottom-color:var(--blue-deep);
  box-shadow:0 1px 0 0 var(--blue-deep);
  background:rgba(255,255,255,.5);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.allergen-option:has(input:focus-visible),
.transport-field .check:has(input:focus-visible){
  outline:2px solid var(--blue-deep);
  outline-offset:3px;
}
.button.primary:hover{background:#4C5C69;border-color:#4C5C69}

/* The Day: align icons with the time rather than floating mid-row */
@media(min-width:801px){
  .timeline .day-segment{align-items:start}
}

/* Two-column sections: keep the floral in the page gutter so it never sits on text */
@media(min-width:801px){
  .two-col.floral-left-soft::before{
    left:calc((min(1180px, 92vw) - 100vw) / 2);
    width:clamp(0px, calc((100vw - 1180px) / 2 + 10px), 210px);
  }
}
/* Grid children must be allowed to shrink, or wide content pushes the page sideways */
.two-col > *{min-width:0}
/* Decorative florals poke past the viewport edge on phones; clip (not hide) keeps sticky header working */
body{overflow-x:clip}
@media(max-width:800px){
  .two-col.floral-left-soft::before{display:none}
  /* Was min(440px, 96vw), wider than the 92vw section, which pushed the text off-screen */
  .dress-code-visual{width:100% !important;max-width:440px}
}

/* Our Story: alternating timeline on wider screens */
.tortoise-photo-frame{max-width:340px !important}
@media(min-width:900px){
  .story-section{max-width:1080px}
  .story-line{padding-left:0;margin-top:1rem}
  .story-line:before{left:50%}
  .story-line article{width:50%;padding:0 3.25rem 3rem 0;text-align:right}
  .story-line article + article{margin-top:-3.5rem}
  .story-line article:before{left:auto;right:-6px}
  .story-line article:nth-child(even){margin-left:50%;padding:0 0 3rem 3.25rem;text-align:left}
  .story-line article:nth-child(even):before{right:auto;left:-5px}
  .story-line article:nth-child(odd) .tortoise-photo-frame{margin-left:auto}
  .story-line .tortoise-photo-frame{max-width:270px !important}

  .story-line .final-story{
    width:100%;
    margin:1.5rem 0 0 !important;
    padding:2.6rem 1rem .5rem;
    text-align:center;
    background:var(--ivory);
  }
  .story-line .final-story:before{
    left:50%;
    right:auto;
    top:0;
    transform:translateX(-50%);
    width:15px;
    height:15px;
    background:var(--blue-deep);
    border-color:var(--blue-deep);
  }
  .story-line .final-story h3{font-size:2.7rem}
}

/* Gallery: four even polaroid-style frames instead of a ragged 3-column grid */
#gallery .gallery-three-corrected{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1.6rem !important;
  max-width:1080px !important;
  padding-bottom:1.4rem;
}
#gallery .gallery-three-corrected .memory-mat{padding:12px 12px 18px !important}
#gallery .gallery-three-corrected .gallery-photo:nth-child(n) .memory-mat img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 5 !important;
  object-fit:cover !important;
  object-position:center 30% !important;
}
#gallery .gallery-three-corrected .gallery-photo:nth-child(1) .memory-mat img{object-position:center 0% !important}
#gallery .gallery-three-corrected .gallery-photo:nth-child(4) .memory-mat img{object-position:center 45% !important}
#gallery .gallery-photo{transition:transform .35s ease}
#gallery .gallery-photo:nth-child(odd){transform:rotate(-1.2deg)}
#gallery .gallery-photo:nth-child(even){transform:rotate(1deg) translateY(1.4rem)}
#gallery .gallery-photo:hover{transform:rotate(0) translateY(-4px)}
@media(max-width:900px){
  #gallery .gallery-three-corrected{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:620px !important;
    gap:1.1rem !important;
  }
}
@media(max-width:480px){
  #gallery .gallery-three-corrected{gap:.8rem !important}
  #gallery .gallery-three-corrected .memory-mat{padding:7px 7px 12px !important;border-radius:12px !important}
  #gallery .gallery-photo:nth-child(odd){transform:rotate(-.8deg)}
  #gallery .gallery-photo:nth-child(even){transform:rotate(.7deg) translateY(.9rem)}
}

/* FAQ: replace the browser's default triangle with a quiet plus/close icon */
.faq-list summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  transition:color .2s ease;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";
  flex:0 0 28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:50%;
  background:
    linear-gradient(var(--blue-deep),var(--blue-deep)) center / 10px 1px no-repeat,
    linear-gradient(var(--blue-deep),var(--blue-deep)) center / 1px 10px no-repeat;
  transition:transform .3s ease, background-color .3s ease;
}
.faq-list summary:hover{color:var(--blue-deep)}
.faq-list details[open] summary::after{transform:rotate(45deg);background-color:rgba(140,157,173,.12)}
.faq-list details p{margin:.7rem 0 .25rem}

/* Taxis: align card content from the top so the cards line up */
.taxi-card{justify-content:flex-start}

/* Dress code: guest-friendly swatches and a tagline without stray spaces */
.swatch-caption{
  margin:2rem 0 .8rem;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-deep);
}
.swatch-row{margin-top:0;gap:1.8rem;flex-wrap:wrap}
.swatch-item{display:inline-flex;align-items:center;gap:.7rem}
.swatch-white{background:#FFFFFF}
.dress-code-caption{margin:-.3rem auto 0;padding:0 .5rem;text-align:center}
.dress-code-caption-title{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1.1;
  color:var(--blue-deep);
}
.dress-code-caption-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  margin:.6rem 0 0;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.6;
  text-transform:uppercase;
  color:rgba(79,90,98,.72);
}
.dress-code-caption-note::before,
.dress-code-caption-note::after{
  content:"";
  flex:0 0 42px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,126,145,.55));
}
.dress-code-caption-note::after{background:linear-gradient(90deg,rgba(101,126,145,.55),transparent)}
@media(max-width:480px){
  .dress-code-caption-note{letter-spacing:.12em;font-size:.56rem}
  .dress-code-caption-note::before,
  .dress-code-caption-note::after{display:none}
}

/* Map key: the hairline display font made G / ✦ / E too faint (E especially) */
.elegant-list-pin{
  width:30px;
  height:30px;
  border:1.5px solid rgba(89,106,120,.75);
  color:var(--blue-deep);
  background:#FBF9F5;
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:600;
  line-height:1;
}

/* Map: tone the tiles to the ivory palette */
.themed-wedding-map .leaflet-tile-pane{
  filter:grayscale(.8) sepia(.22) hue-rotate(170deg) saturate(.7) contrast(.92) brightness(1.04) !important;
}

/* RSVP: transport request styled like the allergen tiles */
.transport-field .check{
  align-items:center;
  margin:0;
  padding:.8rem .9rem;
  border:1px solid rgba(140,157,173,.26);
  border-radius:10px;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.transport-field .check:hover{border-color:rgba(101,126,145,.48)}
.transport-field .check:has(input:checked){border-color:rgba(101,126,145,.58);background:rgba(140,157,173,.13)}
.transport-field .check input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:#8C9DAD}
.transport-field .field-note{margin:.45rem 0 0 .2rem}

/* Contact: give the heading room above the card */
#contact h2{margin-bottom:2.4rem}
.form-message:empty{margin:0}

/* Smaller floating menu button on phones so it covers less content */
@media(max-width:800px){
  .monogram-button{width:52px;height:52px;font-size:1.05rem}
  .site-header{padding:.8rem}
}

@media(prefers-reduced-motion:reduce){
  #gallery .gallery-photo,
  .faq-list summary::after{transition:none}
}


/* =========================================================
   Gallery lightbox
   ========================================================= */
.gallery-open{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:none;
  cursor:zoom-in;
}
.gallery-open img{transition:filter .3s ease}
.gallery-open:hover img{filter:brightness(1.05)}
.gallery-open:focus-visible{outline:2px solid var(--blue-deep);outline-offset:4px}
body.lightbox-open{overflow:hidden}

.lightbox{
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:clamp(3.5rem,6vw,5rem) clamp(4.5rem,8vw,7rem);
  border:0;
  background:transparent;
  color:var(--white);
  display:none;
  place-items:center;
  overflow:hidden;
}
.lightbox[open]{display:grid;animation:lightbox-fade .3s ease}
.lightbox::backdrop{background:rgba(38,45,51,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox-figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  max-width:100%;
  max-height:100%;
}
.lightbox-image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(1100px,100%);
  max-height:calc(100vh - 9rem);
  max-height:calc(100dvh - 9rem);
  object-fit:contain;
  border:10px solid #FBF9F5;
  border-bottom-width:16px;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:lightbox-photo .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox-count{
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(251,249,245,.75);
}
.lightbox-close,
.lightbox-nav{
  position:fixed;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0 0 .15rem;
  border:1px solid rgba(251,249,245,.45);
  border-radius:50%;
  background:rgba(38,45,51,.35);
  color:#FBF9F5;
  font-family:var(--serif);
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{background:rgba(251,249,245,.18);border-color:rgba(251,249,245,.8)}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{outline:2px solid #FBF9F5;outline-offset:3px}
.lightbox-close{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));font-size:2rem}
.lightbox-nav{top:50%;translate:0 -50%;font-size:2.4rem}
.lightbox-prev{left:max(1rem,env(safe-area-inset-left))}
.lightbox-next{right:max(1rem,env(safe-area-inset-right))}
@keyframes lightbox-fade{from{opacity:0}to{opacity:1}}
@keyframes lightbox-photo{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Phones: arrows move to the bottom so the photo can use the full width */
@media(max-width:600px){
  .lightbox{padding:4.5rem .75rem 5.75rem}
  .lightbox-image{
    max-height:calc(100vh - 12rem);
    max-height:calc(100dvh - 12rem);
    border-width:6px 6px 10px;
  }
  .lightbox-nav{top:auto;bottom:max(1rem,env(safe-area-inset-bottom));translate:none}
  .lightbox-prev{left:calc(50% - 64px)}
  .lightbox-next{right:calc(50% - 64px)}
}
@media(prefers-reduced-motion:reduce){
  .lightbox[open],
  .lightbox-image{animation:none}
}


/* =========================================================
   Opening animation — drawn wreath, staggered reveal,
   drifting petals and an "invitation doors" exit
   ========================================================= */

/* The two halves of the ivory backdrop slide apart on Enter */
.opening{
  overflow:hidden;
  background:transparent;
  transition:none;
}
.opening::before,
.opening::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50.5%;
  z-index:0;
  background:
    radial-gradient(ellipse 95% 55% at var(--glow-x) 40%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    var(--ivory);
  transition:transform 1.15s cubic-bezier(.77,0,.18,1) .3s;
}
.opening::before{left:0;--glow-x:100%}
.opening::after{right:0;--glow-x:0%}
.opening-inner,
.opening-petals{position:relative;z-index:1}
.opening.leave{opacity:1;visibility:visible;pointer-events:none}
.opening.leave::before{transform:translateX(-100%)}
.opening.leave::after{transform:translateX(100%)}
.opening.leave .opening-inner{
  opacity:0;
  transform:scale(1.05);
  filter:blur(3px);
  transition:opacity .28s ease, transform .7s ease, filter .28s ease;
}
.opening.leave .opening-petals{opacity:0;transition:opacity .35s ease}

.opening-inner{min-height:100vh;min-height:100svh;padding:2rem 1rem}

/* Crest: SVG wreath (built in site.js) around the monogram */
.opening-crest{
  position:relative;
  width:clamp(220px,34vh,330px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-bottom:.2rem;
}
.opening-wreath{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.opening-wreath .ring{
  fill:none;
  stroke:rgba(89,106,120,.26);
  stroke-width:.8;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:wreath-draw 2.6s .1s ease forwards;
}
.opening-wreath .stem{
  fill:none;
  stroke:#8C9DAD;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:wreath-draw 2.1s .25s cubic-bezier(.45,.05,.25,1) forwards;
}
.opening-wreath .leaf{
  fill:rgba(125,143,160,.62);
  stroke:#6F8496;
  stroke-width:.6;
  transform-box:fill-box;
  transform-origin:0% 50%;
  transform:scale(0);
  animation:leaf-grow .75s cubic-bezier(.2,.9,.3,1.25) forwards;
  animation-delay:var(--delay,1s);
}
.opening-wreath .accent{
  fill:#596A78;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:leaf-grow .6s cubic-bezier(.2,.9,.3,1.4) forwards;
  animation-delay:var(--delay,2.3s);
}
@keyframes wreath-draw{to{stroke-dashoffset:0}}
@keyframes leaf-grow{to{transform:scale(1)}}

/* Monogram: N and S drift in from either side, the ampersand turns into place */
.opening-crest .opening-monogram{
  position:relative;
  font-size:clamp(3.6rem,10vh,6.4rem);
  gap:.1em;
  opacity:1;
  transform:none;
  animation:none;
}
.opening-crest .opening-monogram > span{display:inline-block;opacity:0}
.opening-crest .mono-n{animation:mono-in-left 1.3s .9s cubic-bezier(.2,.8,.2,1) forwards}
.opening-crest .mono-s{animation:mono-in-right 1.3s .9s cubic-bezier(.2,.8,.2,1) forwards}
.opening-crest .opening-monogram .amp{animation:amp-in 1.1s 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes mono-in-left{from{opacity:0;transform:translateX(-.4em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mono-in-right{from{opacity:0;transform:translateX(.4em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes amp-in{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:translateY(.04em)}}

/* Text lines reveal one after another. `translate` (not transform) keeps button hover lift working. */
/* Order: logo → names → welcome line → details */
.opening-inner h1{margin:.6rem 0 .35rem;opacity:0;animation:rise-in 1.1s 1.9s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner .opening-welcome{margin:.15rem 0 1.25rem;opacity:0;animation:track-in 1.4s 2.2s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner .opening-copy{opacity:0;animation:rise-in 1s 2.45s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner .date-line{opacity:0;animation:rise-in 1s 2.65s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner .countdown-phrase{opacity:0;animation:rise-in 1s 2.85s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner #enterButton{position:relative;opacity:0;animation:rise-in 1s 3.15s cubic-bezier(.2,.8,.2,1) forwards}
.opening-inner .tiny-note{opacity:0;animation:note-in 1s 3.45s ease forwards}
@keyframes rise-in{from{opacity:0;translate:0 14px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes track-in{from{opacity:0;letter-spacing:.75em}to{opacity:1;letter-spacing:.31em}}
@keyframes note-in{to{opacity:.55}}
.count-up{display:inline-block;text-align:center}

/* Soft halo pulse on the Enter button once everything has arrived */
.opening-inner #enterButton::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid var(--blue-deep);
  opacity:0;
  pointer-events:none;
  animation:enter-halo 2.8s 4.3s ease-out infinite;
}
@keyframes enter-halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.28,1.7)}}

/* Petals drifting down behind the content */
.opening-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;
  top:-6vh;
  left:var(--x);
  width:var(--s);
  height:calc(var(--s) * .62);
  opacity:0;
  animation:petal-fall var(--dur) linear var(--delay) infinite;
}
.petal i{
  display:block;
  width:100%;
  height:100%;
  border-radius:100% 0 100% 0;
  background:var(--c);
  animation:petal-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate;
}
@keyframes petal-fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  8%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--drift),112vh,0) rotate(var(--spin))}
}
@keyframes petal-sway{from{transform:translateX(-14px) rotate(-20deg)}to{transform:translateX(14px) rotate(25deg)}}

@media(max-width:480px){
  .opening-inner{padding:1.4rem .8rem}
  .opening-inner .opening-copy{font-size:1.2rem}
}

/* Reduced motion: show the finished screen immediately and fade out on Enter */
@media(prefers-reduced-motion:reduce){
  .opening-petals{display:none}
  .opening-wreath .ring,
  .opening-wreath .stem{animation:none;stroke-dashoffset:0}
  .opening-wreath .leaf,
  .opening-wreath .accent{animation:none;transform:none}
  .opening-crest .opening-monogram > span,
  .opening-inner > *{animation:none !important;opacity:1 !important}
  .opening-inner .tiny-note{opacity:.55 !important}
  .opening-inner #enterButton::after{display:none}
  .opening::before,
  .opening::after{transition:none}
  .opening.leave{opacity:0;transition:opacity .6s ease}
  .opening.leave::before,
  .opening.leave::after{transform:none}
}

/* evening-shared-rsvp */
.evening-rsvp .evening-add-guest{display:block;margin:0 auto 1.2rem}
.evening-rsvp .evening-remove-guest{display:inline-block;margin-top:.4rem;font-size:.82rem;background:none;border:0;padding:0;cursor:pointer}
.evening-rsvp > .field-note{text-align:center;margin:0 0 1.6rem}
.evening-edit-link{margin-top:.9rem;font-size:.9rem;word-break:break-word}
.evening-edit-link a{text-decoration:underline}

/* =========================================================
   evening-theme — the evening-only page is a night celebration.
   Scoped to body.evening-page, so the day invitation is untouched.
   The stationery layout is kept; the paper becomes night sky, with
   candlelight gold accents, warm ivory text and a moonlit hero.
   ========================================================= */
body.evening-page{
  --blue:#8FA2C4;
  --blue-deep:#E6D8B6;      /* warm parchment — headings, monogram, small accents */
  --ink:#ECE5D7;
  --ivory:#18203A;          /* the "paper" is now the night sky */
  --ivory-deep:#121933;
  --white:#212B49;
  --line:rgba(226,198,141,.24);
  --gold:#C9A25E;--gold-light:#E4C88F;
  --night:#1B2440;--night-deep:#101736;
  --shadow:0 26px 80px rgba(5,9,22,.45);
  color:var(--ink);
  /* A solid colour underneath, because a fixed gradient alone leaves the white
     page canvas showing through during a fast scroll or an overscroll bounce.
     The gradient is sized to the document instead of being viewport-fixed, which
     mobile browsers repaint poorly. */
  background-color:#141C36;
  background-image:linear-gradient(180deg,#101736 0%,#18203A 30%,#1D2747 64%,#141C36 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-attachment:scroll;
}

/* The paper grain becomes a faint scatter of light instead of ink */
.evening-page .paper-grain{mix-blend-mode:screen;opacity:.04}

/* Candlelight accents */
.evening-page .eyebrow,
.evening-page .travel-kicker,
.evening-page .hotel-tier,
.evening-page .swatch-caption,
.evening-page .timeline .time,
.evening-page .story-line time,
.evening-page .final-story h3,
.evening-page .text-link,
.evening-page .hotel-live-rate,
.evening-page .hotel-live-link,
.evening-page .taxi-phone,
.evening-page .form-message,
.evening-page .evening-remove-guest{color:var(--gold-light)}
.evening-page .countdown-phrase{color:rgba(236,229,215,.82)}
.evening-page .field-note,
.evening-page .taxi-note,
.evening-page .travel-note,
.evening-page .hotel-disclaimer,
.evening-page .hotel-date-note,
.evening-page .map-credit{color:rgba(236,229,215,.62)}
.evening-page .story-line:before{background:rgba(226,198,141,.28)}
.evening-page .story-line article:before{background:var(--night);border-color:var(--gold)}

/* Line art drawn for ivory paper is lifted so it reads against the night */
/* The floral sprigs become constellations on the evening page */
.evening-page .floral-section::before{background-image:url("/static/night-left.svg")}
.evening-page .floral-section::after{background-image:url("/static/night-right.svg")}
.evening-page .floral-section::before,
.evening-page .floral-section::after{
  /* Smaller and pushed further into the margin than the florals were: bright
     star points sitting behind a paragraph make it hard to read. */
  width:clamp(130px,14vw,215px);
  opacity:.34;filter:none;
  animation:evening-constellation 9s ease-in-out infinite alternate;
}
.evening-page .floral-left-edge::before,
.evening-page .floral-left-soft::before{left:max(-8vw,-124px)}
/* Bleed out to the viewport edge but never past it: a negative offset here adds
   scrollable width on the right, which lets the whole page pan sideways.
   50% is half the section, 50vw half the viewport, so this lands flush; the 12px
   keeps clear of a desktop scrollbar, which 100vw does not account for. */
.evening-page .floral-right-corner::after,
.evening-page .floral-right-soft::after{right:max(calc(50% - 50vw + 12px),-124px)}
/* The dress-code section carries no constellations: they landed over the
   illustration's own dissolve and the copy beside it. */
.evening-page .dress-code-section::before,
.evening-page .dress-code-section::after{content:none}

/* Whatever still reaches over the text column is faded out on that inner side. */
.evening-page .floral-left-edge::before,
.evening-page .floral-left-soft::before{
  -webkit-mask-image:linear-gradient(to right,#000 0 30%,rgba(0,0,0,.34) 68%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0 30%,rgba(0,0,0,.34) 68%,transparent 100%);
}
.evening-page .floral-right-corner::after,
.evening-page .floral-right-soft::after{
  -webkit-mask-image:linear-gradient(to left,#000 0 30%,rgba(0,0,0,.34) 68%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0 30%,rgba(0,0,0,.34) 68%,transparent 100%);
}
@keyframes evening-constellation{from{opacity:.26}to{opacity:.4}}
.evening-page .day-graphic{background:rgba(226,198,141,.07);border:1px solid rgba(226,198,141,.14)}
.evening-page .day-graphic img{filter:brightness(0) invert(1);opacity:.82}
.evening-page .elegant-list-pin{background:rgba(226,198,141,.12);border-color:rgba(226,198,141,.4);color:var(--gold-light)}

/* Panels: deep navy glass with a gold hairline */
.evening-page .rsvp-card,
.evening-page .contact-form,
.evening-page .guest-rsvp,
.evening-page .hotel-card,
.evening-page .taxi-card,
.evening-page .card,
.evening-page .quote-card,
.evening-page .wedding-map-panel{
  background:rgba(33,44,74,.55);
  border-color:rgba(226,198,141,.2);
}
.evening-page .hotel-card:hover,
.evening-page .taxi-card:hover{border-color:rgba(226,198,141,.45)}
.evening-page .bordered{border-top-color:rgba(226,198,141,.16)}
.evening-page details{border-top-color:rgba(226,198,141,.16)}
.evening-page details:last-child{border-bottom-color:rgba(226,198,141,.16)}
.evening-page .timeline-item,
.evening-page .timeline-item:last-child{border-color:rgba(226,198,141,.16)}

/* Form controls */
.evening-page input,
.evening-page select,
.evening-page textarea{background:rgba(255,255,255,.06);color:var(--ink);border-bottom-color:rgba(226,198,141,.3)}
.evening-page input::placeholder,
.evening-page textarea::placeholder{color:rgba(236,229,215,.45)}
.evening-page select option{background:#F4EFE4;color:#18203A}
.evening-page input[type="checkbox"]{accent-color:var(--gold)}
.evening-page .allergen-option{background:rgba(255,255,255,.05);border-color:rgba(226,198,141,.2)}
.evening-page .allergen-option:hover{border-color:rgba(226,198,141,.42)}
.evening-page .spotify-option{background:rgba(24,32,58,.92);border-color:rgba(226,198,141,.2)}
.evening-page .spotify-option:hover{border-color:rgba(226,198,141,.45)}

/* Navigation and buttons */
.evening-page .monogram-button{background:rgba(20,27,52,.92);color:#F0E3C4;border-color:rgba(226,198,141,.4)}
.evening-page .site-nav{background:rgba(17,24,47,.97);border-color:rgba(226,198,141,.24)}
.evening-page .site-nav a{border-bottom-color:rgba(226,198,141,.16)}
.evening-page .site-nav a:hover{color:var(--gold-light)}
.evening-page .button{border-color:var(--gold);color:var(--gold-light)}
.evening-page .button.primary{background:var(--gold);border-color:var(--gold);color:#16203C}
.evening-page .button.primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:#16203C}
.evening-page .button.secondary:hover{background:var(--gold);color:#16203C}
.evening-page .button:disabled{opacity:.55;cursor:default}

/* Photographs sit in deep mats so they glow against the night */
.evening-page .memory-card .memory-mat,
.evening-page .tortoise-photo-mat{
  background:linear-gradient(180deg,rgba(40,52,86,.95),rgba(24,32,56,.97));
  border-color:rgba(226,198,141,.22);
  box-shadow:0 22px 46px rgba(5,9,22,.5);
}
.evening-page .hero-photo-frame img{box-shadow:0 30px 80px rgba(5,9,22,.55)}

/* The watercolour is painted for ivory paper (it multiplies into it),
   so it keeps a soft sheet of moonlit paper behind it. */
/* The evening artwork is painted on its own dusk sky and its border is already
   faded into the page colour in the file itself, so it needs no blend or mask. */
.evening-page .dress-code-watercolour{
  mix-blend-mode:normal;
  opacity:1;
  -webkit-mask-image:none;
  mask-image:none;
  /* The file carries padding around the figures for its dissolve, so it is given
     a little more height to stand at the same size as the day illustration. */
  max-height:780px;
  margin-block:-3%;
}
.evening-page .dress-code-visual > *{position:relative;z-index:1}
.evening-page .dress-code-caption-title{color:#F3E7CE}
.evening-page .dress-code-caption-note{color:rgba(236,229,215,.75)}

/* Map: the tiles are dimmed to a night map inside a dark panel */
.evening-page .themed-wedding-map .leaflet-tile-pane{
  filter:grayscale(.7) sepia(.35) hue-rotate(186deg) saturate(.85) brightness(.5) contrast(1.1) !important;
  opacity:.9 !important;
}
.evening-page .themed-wedding-map::after{
  background:rgba(16,23,54,.1);
  box-shadow:inset 0 0 75px rgba(8,13,32,.6);
}
.evening-page .themed-wedding-map .leaflet-control-zoom a{
  color:#E9DCBB !important;background:rgba(24,32,58,.95) !important;
  border-bottom-color:rgba(226,198,141,.2) !important;
}
.evening-page .wedding-map-header span{color:var(--gold-light)}
.evening-page .map-location-item{background:rgba(255,255,255,.04);border-color:rgba(226,198,141,.18)}
.evening-page .map-location-item:hover{border-color:rgba(226,198,141,.45)}

/* Starfields (opening, hero and footer share one look) */
.evening-stars{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,252,243,.95),transparent),
    radial-gradient(1.3px 1.3px at 27% 42%,rgba(255,252,243,.75),transparent),
    radial-gradient(1.8px 1.8px at 41% 11%,rgba(255,252,243,.9),transparent),
    radial-gradient(1.2px 1.2px at 58% 31%,rgba(255,252,243,.7),transparent),
    radial-gradient(1.7px 1.7px at 71% 8%,rgba(255,252,243,.9),transparent),
    radial-gradient(1.3px 1.3px at 84% 26%,rgba(255,252,243,.75),transparent),
    radial-gradient(1.5px 1.5px at 93% 47%,rgba(255,252,243,.85),transparent),
    radial-gradient(1.2px 1.2px at 19% 63%,rgba(255,252,243,.6),transparent),
    radial-gradient(1.4px 1.4px at 48% 72%,rgba(255,252,243,.55),transparent),
    radial-gradient(1.2px 1.2px at 77% 66%,rgba(255,252,243,.5),transparent);
  animation:evening-twinkle 6s ease-in-out infinite alternate;
}
@keyframes evening-twinkle{from{opacity:.55}to{opacity:1}}

/* Hero: a moonlit sky that settles into the page's own night */
.evening-page main{position:relative}
.evening-page .evening-hero{position:static}
.evening-page .evening-hero > *:not(.evening-sky){position:relative;z-index:1}
.evening-sky{
  /* Spans the page, not 100vw: vw units include the scrollbar, which made the
     sky wider than the viewport and let the page pan sideways. Positioned
     against <main>, whose width is exactly the page width. */
  position:absolute;
  left:0;right:0;top:-12rem;
  height:clamp(760px,118vh,1320px);
  overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#0E1531 0%,#1B2447 38%,#33375C 62%,#2A2E4E 80%,rgba(24,32,58,0) 100%);
}
.evening-stars-hero{bottom:30%}
.evening-moon{
  /* Offset from the top of the sky panel, which starts above the page, so the
     moon lands just inside the viewport rather than being cut off. */
  position:absolute;top:calc(12rem + 48px);right:17%;
  width:clamp(64px,7vw,104px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF8E7,#F0DFBC 62%,#E3CB9E);
  box-shadow:0 0 60px 18px rgba(255,241,214,.26),0 0 140px 50px rgba(255,236,197,.14);
}
.evening-page .evening-hero .hero-monogram{color:#F3E7CE}

/* Opening screen: the ivory doors open on a twilight sky */
.evening-page .opening{color:#F6F1E7}
.evening-page .opening::before,
.evening-page .opening::after{
  background:
    radial-gradient(ellipse 95% 55% at var(--glow-x) 62%,rgba(255,224,178,.24),rgba(255,224,178,0) 68%),
    linear-gradient(180deg,var(--night-deep) 0%,var(--night) 46%,#3B3F63 78%,#6B5A73 100%);
}
.evening-page .opening .evening-stars{z-index:0;opacity:.85}
.evening-page .opening-monogram{color:#F3E7CE}
.evening-page .opening-welcome{color:var(--gold-light)}
.evening-page .opening .date-line,
.evening-page .opening .countdown-phrase{color:rgba(246,241,231,.8)}
.evening-page .opening-wreath .ring{stroke:rgba(216,184,126,.4)}
.evening-page .opening-wreath .stem{stroke:rgba(216,184,126,.55)}
.evening-page .opening-wreath .leaf{fill:rgba(216,184,126,.42);stroke:rgba(230,205,158,.75)}
.evening-page .opening-wreath .accent{fill:rgba(255,246,226,.85);stroke:none}
.evening-page .opening #enterButton{background:transparent;border-color:var(--gold-light);color:#F6F1E7}
.evening-page .opening #enterButton:hover{background:var(--gold-light);color:var(--night-deep)}
.evening-page .opening #enterButton::after{border-color:var(--gold-light)}

/* Footer deepens into the small hours */
.evening-page .evening-footer{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(226,198,141,.16);
  background:linear-gradient(180deg,rgba(20,28,54,0) 0%,#141C36 30%,var(--night-deep) 70%,#0B1128 100%);
  color:#F1EADD;
}
.evening-page .evening-footer .footer-monogram{color:#F3E7CE}
.evening-page .evening-footer .evening-stars-footer{top:24%}
.evening-page .evening-footer > *:not(.evening-stars){position:relative;z-index:1}

@media(max-width:800px){
  .evening-sky{top:-9rem;height:clamp(680px,105vh,1000px)}
  /* On a phone the text column reaches the edges, so the constellations retreat. */
  .evening-page .floral-section::before,
  .evening-page .floral-section::after{width:115px;opacity:.2}
  .evening-page .floral-left-edge::before,
  .evening-page .floral-left-soft::before{left:-46px}
  .evening-page .floral-right-corner::after,
  .evening-page .floral-right-soft::after{right:max(calc(50% - 50vw + 12px),-46px)}
  /* Keep the moon clear of the sticky monogram menu button on phones. */
  .evening-moon{top:calc(9rem + 40px);right:auto;left:10%;width:clamp(52px,14vw,64px)}
}

@media(prefers-reduced-motion:reduce){
  .evening-stars{animation:none}
  .evening-page .floral-section::before,
  .evening-page .floral-section::after{animation:none;opacity:.32}
}

/* evening-shared-rsvp */
.evening-rsvp .evening-add-guest{display:block;margin:0 auto 1.2rem}
.evening-rsvp .evening-remove-guest{display:inline-block;margin-top:.4rem;font-size:.82rem;background:none;border:0;padding:0;cursor:pointer}
.evening-rsvp > .field-note{text-align:center;margin:0 0 1.6rem}
.evening-edit-link{margin-top:.9rem;font-size:.9rem;word-break:break-word}
.evening-edit-link a{text-decoration:underline}

/* Remaining map chrome and photo frames, carried over to the night theme */
.evening-page .hero-photo-frame.arched-photo{background:rgba(32,43,72,.9);box-shadow:0 30px 80px rgba(5,9,22,.55)}
.evening-page .wedding-map-frame.themed-map-shell{background:#131B33;border-color:rgba(226,198,141,.2)}
.evening-page .themed-wedding-map.leaflet-container{background:#131B33}
.evening-page .map-view-controls{background:rgba(20,27,52,.82);border-color:rgba(226,198,141,.22)}
.evening-page .map-view-button{background:rgba(255,255,255,.06);color:#E9DCBB}
.evening-page .map-view-button.is-active{background:rgba(226,198,141,.9);color:#16203C}
.evening-page .map-route-legend{background:rgba(18,25,48,.92);color:#ECE5D7;border-color:rgba(226,198,141,.2)}
.evening-page .map-credit{background:rgba(18,25,48,.8)}
.evening-page .leaflet-tooltip.wedding-map-name-label{background:rgba(18,25,48,.92) !important;color:#ECE5D7 !important;border-color:rgba(226,198,141,.28) !important}

/* Muted supporting text that was written for ink on ivory */
.evening-page .map-location-item small,
.evening-page .hotel-address,
.evening-page .hotel-rate-label{color:rgba(236,229,215,.62)}

/* Song search feedback, styled for the night theme */
.evening-page .spotify-preview-card{background:rgba(255,255,255,.07);border-color:rgba(226,198,141,.22)}
.evening-page .spotify-preview-button{color:var(--gold-light);border-color:rgba(226,198,141,.4)}
.evening-page .spotify-selected{background:rgba(226,198,141,.08);border-left-color:var(--gold)}
.evening-page .spotify-duplicate-message{
  background:rgba(226,198,141,.1);
  border-color:rgba(226,198,141,.34);
  border-left-color:var(--gold);
  color:#F1E7D2;
}

/* gallery-reveal: photos fade and drift up into their resting tilt, one after
   another, when the gallery scrolls into view (both day and evening pages).
   The hidden state applies only once site.js marks the grid as ready. */
#gallery .gallery-grid.gallery-reveal-ready .gallery-photo{
  transition:transform .62s cubic-bezier(.22,.78,.28,1),opacity .62s ease;
  transition-delay:var(--reveal-delay,0s);
  will-change:transform,opacity;
}
#gallery .gallery-grid.gallery-reveal-ready .gallery-photo:not(.is-revealed){
  opacity:0;
  transform:translateY(30px) rotate(0) scale(.985);
}
#gallery .gallery-grid.gallery-reveal-ready .gallery-photo:hover{
  transition-delay:0s;
}
@media(prefers-reduced-motion:reduce){
  #gallery .gallery-grid.gallery-reveal-ready .gallery-photo{transition:none}
  #gallery .gallery-grid.gallery-reveal-ready .gallery-photo:not(.is-revealed){opacity:1;transform:none}
}

/* The gallery mats are set by an id-scoped rule, so the night theme needs to
   outrank it; white mats looked like leftovers from the day invitation. */
.evening-page #gallery .gallery-three-corrected .memory-mat,
.evening-page #gallery .memory-card .memory-mat{
  background:linear-gradient(180deg,rgba(40,52,86,.95),rgba(24,32,56,.97)) !important;
  border-color:rgba(226,198,141,.22) !important;
  box-shadow:0 22px 46px rgba(5,9,22,.5) !important;
}

/* Only render the decoration a section actually asks for. The base rule gives
   BOTH pseudo-elements content, so a section with a left-hand floral also carried
   an invisible 185px box on the right, positioned at auto — which added width to
   the page and let it pan sideways on phones. */
.floral-section::before,
.floral-section::after{content:none}
.floral-left-edge::before,
.floral-left-soft::before,
.floral-right-corner::after,
.floral-right-soft::after,
#faq.floral-right-soft::after{content:""}

/* Home page: 4-digit invitation code for guests who are not scanning the QR code */
.gate-form{display:grid;justify-items:center;gap:.7rem;margin:2rem auto 1.6rem;max-width:300px}
.gate-form label{margin:0}
.gate-form input{width:9.5rem;text-align:center;font-family:var(--sans);font-size:1.6rem;font-weight:500;letter-spacing:.35em;padding:.5rem 0 .5rem .35em;border:1px solid var(--line);background:rgba(255,255,255,.5)}
.gate-form input::placeholder{color:rgba(79,90,98,.25)}
.gate-form input:focus{border-color:var(--blue-deep)}
.gate-form .button{margin-top:.3rem}
.gate-error{margin:0}
.gate-help{margin-bottom:0}

/* gallery-alive: after the reveal the photos keep moving gently while the gallery is on
   screen. Each frame floats on its own rhythm, the photo inside slowly drifts and zooms,
   and a soft glint crosses the print now and then. The three motions sit on different
   elements (mat, img, button::after) so they never fight the figure's tilt, reveal or
   hover transforms. site.js adds .gallery-live only while the section is visible. */
@keyframes gallery-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  25%{transform:translate3d(0,-7px,0) rotate(.5deg)}
  50%{transform:translate3d(0,-3px,0) rotate(-.3deg)}
  75%{transform:translate3d(0,-9px,0) rotate(.25deg)}
}
@keyframes gallery-drift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(var(--drift-x,0),var(--drift-y,0),0)}
}
@keyframes gallery-glint{
  0%,80%{transform:translateX(-140%) skewX(-18deg);opacity:0}
  83%{opacity:1}
  100%{transform:translateX(260%) skewX(-18deg);opacity:0}
}
#gallery .gallery-photo .memory-mat{
  animation:gallery-float var(--float-duration,10s) ease-in-out var(--float-delay,0s) infinite paused;
}
#gallery .gallery-open{position:relative;overflow:hidden;isolation:isolate}
#gallery .gallery-open img{
  transform-origin:var(--drift-origin,center);
  animation:gallery-drift var(--drift-duration,16s) ease-in-out var(--float-delay,0s) infinite alternate paused;
}
#gallery .gallery-open::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  pointer-events:none;
  transform:translateX(-140%) skewX(-18deg);
  animation:gallery-glint 12s ease-in-out var(--glint-delay,2s) infinite paused;
}
/* Different tempos and drift directions per photo; each drift pans away from its fixed
   edge so the zoomed image never uncovers the frame, and heads stay in shot. */
#gallery .gallery-photo:nth-child(4n+1){--float-duration:9s;--float-delay:-1s;--drift-duration:18s;--drift-origin:center top;--drift-x:1%;--glint-delay:1s}
#gallery .gallery-photo:nth-child(4n+2){--float-duration:11s;--float-delay:-4s;--drift-duration:15s;--drift-origin:left center;--drift-x:-2%;--glint-delay:4s}
#gallery .gallery-photo:nth-child(4n+3){--float-duration:10s;--float-delay:-2.5s;--drift-duration:17s;--drift-origin:right 30%;--drift-x:2%;--glint-delay:7s}
#gallery .gallery-photo:nth-child(4n+4){--float-duration:12s;--float-delay:-6s;--drift-duration:14s;--drift-origin:center 45%;--drift-y:-1.5%;--glint-delay:9.5s}
#gallery .gallery-grid.gallery-live .gallery-photo.is-revealed .memory-mat,
#gallery .gallery-grid.gallery-live .gallery-photo.is-revealed .gallery-open img,
#gallery .gallery-grid.gallery-live .gallery-photo.is-revealed .gallery-open::after{
  animation-play-state:running;
}
@media(prefers-reduced-motion:reduce){
  #gallery .gallery-photo .memory-mat,
  #gallery .gallery-open img,
  #gallery .gallery-open::after{animation:none}
}