:root {
  --black:#0b0b0b; --ivory:#f7f5f0; --silver:#b8b8b8; --ink:#242424;
  --rule:#7776; --gutter:clamp(1.25rem,5.7vw,7rem); --space:clamp(5rem,11vw,11rem);
  --serif:"Playfair Display",Georgia,serif; --label:"Cinzel",Georgia,serif;
  --body-font:"Baskervville",Georgia,serif; --gold:#cba966; --gold-rule:#a77b405e;
  --ease:cubic-bezier(.22,.72,.2,1);
}
*,*::before,*::after {box-sizing:border-box}
[hidden] {display:none!important}
html {scroll-behavior:smooth;scroll-padding-top:4rem}
body {margin:0;background:var(--ivory);color:var(--ink);font:400 1.06rem/1.72 var(--body-font)}
body.sealed {overflow:hidden}
h1,h2,h3,p,ol {margin:0}
p+p {margin-top:1rem}
button,a {-webkit-tap-highlight-color:transparent;color:inherit}
button {font:inherit;cursor:pointer}
:focus-visible {outline:2px solid currentColor;outline-offset:5px}
section {padding:var(--space) var(--gutter)}
.dark {background:var(--black);color:var(--ivory);--rule:#b8b8b85e}
.light {background:var(--ivory)}
.wrap {max-width:90rem;margin:auto}
.narrow {max-width:42rem;margin:auto}
.eyebrow,.button,.credit,.count-grid small,.envelope small,.site-nav nav,.nav-toggle {
  font:400 .68rem/1.5 var(--label);letter-spacing:.22em;text-transform:uppercase
}
.button {
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.8rem 1.4rem;border:1px solid currentColor;background:none;text-decoration:none;
  letter-spacing:.15em;transition:color .35s,background .35s,transform .35s var(--ease);
  transform:translate(var(--mag-x,0px),var(--mag-y,0px))
}
.button::after {content:"↗";font-size:.9rem;margin-left:.8rem;transition:transform .35s var(--ease)}
.button:hover::after {transform:translate(2px,-2px)}
.button:hover {background:var(--ink);color:white}
.dark .button:hover,.rsvp .button {background:var(--ivory);color:var(--black)}
.rsvp .button:hover {background:#dedad2}
.button:active {transform:scale(.97)}
.button.solid {background:var(--black);color:white}
.button.solid::after {content:"↓"}
.romantic,.signature {font:italic 400 clamp(1.55rem,3vw,2.45rem)/1.12 var(--serif)}
.lead {font:400 clamp(2.5rem,5.6vw,6.2rem)/.93 var(--serif);letter-spacing:-.035em}
.display,.venue h2 {font:400 clamp(3.25rem,8vw,8rem)/.84 var(--serif);letter-spacing:-.045em}
.display em,.lead em {font-weight:400}
.monogram {display:inline-block;font:400 3rem/.85 var(--serif);letter-spacing:-.1em;white-space:nowrap}
.monogram span {font-style:italic;font-size:.54em;margin:0 .16em;vertical-align:14%}
.ornament {display:flex;align-items:center;gap:.6rem;color:#707070;width:5.5rem;margin:1.35rem 0}
.ornament::before {content:"";width:3rem;height:1px;background:currentColor}
.dark .ornament {color:var(--silver)}

.opening {position:fixed;z-index:10;inset:0;overflow:auto;display:grid;place-items:center;text-align:center;padding:1.25rem;background:radial-gradient(ellipse at 50% 28%,#fffdf9 15%,var(--ivory) 76%,#edeae3)}
.opening-inner {width:min(100%,40rem);padding:1rem 0;perspective:1000px}
.opening-mark {display:block;color:#82817e;font-size:2.35rem;margin-bottom:1rem;animation:opening-in .8s var(--ease) both}
.opening h1 {font:400 clamp(2.7rem,7vw,4.85rem)/.84 var(--serif);margin:.7rem 0 2rem;letter-spacing:-.035em}
.opening h1 em {font-weight:400}
.envelope {
  position:relative;isolation:isolate;width:min(91%,27rem);aspect-ratio:1.67;margin:0 auto 2.25rem;
  background:#151515;border:1px solid #313131;perspective:850px;
  box-shadow:0 28px 36px -24px #28231d99,0 8px 16px -10px #28231d88;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .45s var(--ease);animation:opening-in .95s .14s var(--ease) both
}
@keyframes opening-in {from {opacity:0;translate:0 12px}}
.envelope::after {content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(127deg,#bbb1 0 1px,transparent 1px 4px);opacity:.23}
.flap,.pocket,.letter {position:absolute}
.flap {inset:0;z-index:3;clip-path:polygon(0 0,100% 0,50% 63%);background:linear-gradient(164deg,#353535 0%,#1a1a1a 62%,#454545 88%);transform-origin:top;transition:transform .8s .18s var(--ease)}
.pocket {inset:0;z-index:2;clip-path:polygon(0 0,50% 59%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#202020 48%,#353535 48.4%,#1e1e1e 49%,#0c0c0c 95%)}
.letter {z-index:1;inset:7%;background:#fffefa;border:1px solid #d7d1c5;display:grid;place-content:center;gap:.6rem;color:#34312d;transition:transform .82s .65s var(--ease)}
.letter img {width:clamp(3.75rem,12vw,6rem);height:auto;margin:0 auto}
.seal {position:absolute;z-index:4;left:50%;top:56%;translate:-50% -50%;display:flex;align-items:center;justify-content:center;width:clamp(3rem,12vw,4.3rem);aspect-ratio:1;border:4px double #767676;border-radius:49% 46% 49% 44%;color:#252525;background:radial-gradient(circle at 28% 20%,#f3f3f3,#b6b6b6 55%,#7b7b7b);font:400 1.45rem var(--serif);box-shadow:0 5px 12px #000a;transition:opacity .23s .12s,scale .38s var(--ease)}
.seal::after {content:"";position:absolute;inset:0;background:#4d4d4d;clip-path:polygon(53% 0,55% 0,48% 29%,57% 48%,44% 72%,49% 100%,46% 100%,40% 72%,53% 48%,45% 28%);opacity:0}
.opening.unfold .seal::after {opacity:1}
.opening.unfold .seal {opacity:0;scale:1.2}
.opening.unfold .flap {transform:rotateX(176deg);z-index:0}
.opening.unfold .letter {transform:translateY(-61%)}
.opening.finish .letter {z-index:5;transform:translateY(-36%) scale(var(--card-scale,6));transition:transform .58s var(--ease)}
.opening.finish {opacity:0;transition:opacity .5s .18s}
.skip {display:block;min-height:44px;margin:.32rem auto 0;border:0;background:none;padding:.5rem .75rem;font-size:.78rem;text-decoration:underline;text-underline-offset:.25em}

.site-nav {position:fixed;inset:0 0 auto;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;padding:env(safe-area-inset-top) var(--gutter) 0;background:#0b0b0b;color:var(--ivory);border-bottom:1px solid #ffffff29}
.reading-progress {position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:#dedbd2;transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
.nav-mark {font:400 1.8rem/1 var(--serif);letter-spacing:-.08em;text-decoration:none;padding:.6rem 0}
.site-nav nav {display:flex;gap:clamp(.7rem,2.5vw,2.5rem);letter-spacing:.12em}
.site-nav nav a {position:relative;padding:.8rem 0;text-decoration:none;color:#c5c2bc}
.site-nav nav a::after {content:"";position:absolute;inset:auto 0 .45rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.site-nav nav a:hover,.site-nav nav a[aria-current] {color:white}
.site-nav nav a:hover::after,.site-nav nav a[aria-current]::after {transform:scaleX(1)}
.nav-toggle {display:none}

.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:6.5rem 1.5rem 6rem;background:radial-gradient(ellipse at 50% 25%,#292929,transparent 67%),var(--black)}
.hero-frame{position:absolute;inset:1.2rem;top:5.2rem;border:1px solid #b8b8b849;pointer-events:none}
.hero-frame::before,.hero-frame::after{content:"✧";position:absolute;left:50%;translate:-50%;background:var(--black);color:var(--silver);padding:0 .6rem;font:1rem/1 var(--serif)}
.hero-frame::before{top:-.5rem}.hero-frame::after{bottom:-.5rem}
.date{margin-top:2rem}.city{margin-top:.45rem;color:#cecece;font-size:.84rem;letter-spacing:.1em}
.scroll{position:absolute;bottom:2.3rem;left:50%;translate:-50%;display:grid;place-items:center;width:46px;height:46px;border:1px solid #b8b8b878;border-radius:50%;text-decoration:none;animation:float 2.8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(5px)}}
.families>div+div{border-left:1px solid var(--rule)}
.parents{padding-top:0}
.parents .wrap{padding-top:3.5rem;border-top:1px solid #b8b8b8}
.families{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:2.25rem}
.families h3,.timeline h3{font:400 2rem/1.05 var(--serif);margin-bottom:.35rem}
.families p{font-size:.95rem}
.count-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:1.8rem auto 0;max-width:38rem}
.count-grid div+div{border-left:1px solid #b8b8b855}
.count-grid [data-unit]{display:block;font:400 clamp(1.9rem,6vw,4.25rem)/.95 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.count-grid [data-unit].tick{animation:tick .25s ease}
.count-grid small{letter-spacing:.12em;font-size:clamp(.53rem,2vw,.73rem);color:#d1d1d1}
@keyframes tick{from{opacity:.55;transform:translateY(3px)}}

.hero-grid {position:relative;z-index:1}
.hero .ornament,.ornament {justify-content:center;width:9rem;gap:.75rem;margin:1.55rem auto}
.ornament::before,.ornament::after {content:"";height:1px;flex:1;background:currentColor;opacity:.55}
.hero .date {margin-top:2rem}
.hero-foot {position:absolute;inset:auto 0 0}
.scroll span {width:1px;height:15px;background:currentColor;position:relative}
.scroll span::after {content:"";position:absolute;bottom:0;left:-3px;width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;rotate:45deg}
.count-grid div {padding:.5rem .18rem}

.venue {padding-block:clamp(2rem,5vw,5rem)}
.venue-card {max-width:90rem;margin-inline:auto;border-block:1px solid var(--rule)}
.venue-trigger {
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,3vw,3rem);padding:clamp(1.3rem,4vw,4rem) 0;
  cursor:pointer;list-style:none;transition:background .35s var(--ease)
}
.venue-trigger::-webkit-details-marker {display:none}
.venue-title {display:grid;gap:.65rem}
.venue-name {font:400 clamp(2.55rem,7vw,7.4rem)/.83 var(--serif);letter-spacing:-.055em}
.venue-action {display:flex;align-items:center;gap:.7rem;font:400 .66rem/1.4 var(--label);letter-spacing:.13em;text-transform:uppercase}
.venue-plus {display:grid;place-items:center;position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);transition:color .3s,background .3s,transform .4s var(--ease)}
.venue-plus::before,.venue-plus::after {content:"";position:absolute;width:13px;height:1px;background:currentColor}
.venue-plus::after {rotate:90deg;transition:rotate .4s var(--ease)}
.venue-trigger:hover .venue-plus {background:var(--ink);color:white;transform:scale(1.07)}
.dark .venue-trigger:hover .venue-plus {background:var(--ivory);color:var(--black)}
.venue-card[open] .venue-plus::after {rotate:0deg}
.venue-close-label,.venue-card[open] .venue-open-label {display:none}
.venue-card[open] .venue-close-label {display:inline}
.venue-panel {
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;
  gap:clamp(1.5rem,5vw,6rem);padding:0 0 clamp(1.5rem,4vw,4rem)
}
.venue-card[open] .venue-panel {animation:venue-reveal .6s var(--ease) both}
@keyframes venue-reveal {from {clip-path:inset(0 0 95%);opacity:.15;transform:translateY(-.35rem)}to {clip-path:inset(0);opacity:1;transform:none}}
.venue-image {display:block;width:100%;height:auto;border:1px solid var(--rule)}
.venue-copy {padding:clamp(.5rem,2vw,2rem) 0}
.venue-copy .romantic {max-width:29ch}
.venue-copy .button {margin-top:1.35rem}
#ceremonia .venue-image {max-width:38rem}
.reception .venue-panel {grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.reception .venue-image {grid-column:2;grid-row:1}
.reception .venue-copy {grid-column:1;grid-row:1}


.schedule-grid {max-width:42rem;margin:auto}
.schedule h2 {margin-bottom:3rem}
.timeline {position:relative;max-width:28rem;margin:auto;list-style:none;text-align:left;padding:0 0 0 1.6rem;--timeline-progress:1}
.timeline::before,.timeline::after {content:"";position:absolute;top:1.55rem;bottom:2.5rem;left:1.6rem;width:1px;background:#c7bba6}
.timeline::after {background:#98743f;transform:scaleY(var(--timeline-progress));transform-origin:top}
.timeline li {position:relative;padding:0 0 2.2rem 2.45rem}
.timeline li:last-child {padding-bottom:0}
.timeline time {font:400 .69rem/1.4 var(--label);letter-spacing:.17em;text-transform:uppercase}
.timeline h3 {font:400 2rem/1.05 var(--serif);margin:.28rem 0 .3rem}
.timeline p {font-size:.9rem}
.toast {text-align:center;position:relative;isolation:isolate}
.toast::before {content:"";position:absolute;z-index:-1;inset:1rem;border:1px solid var(--rule)}
.toast .display {font-size:clamp(2.7rem,7vw,7rem);margin:1rem 0 1.6rem}
.glass {width:2.9rem;height:4rem;margin:0 auto 1.5rem;position:relative;background:linear-gradient(var(--silver),var(--silver)) center 82%/1px 42% no-repeat,linear-gradient(var(--silver),var(--silver)) bottom/1.9rem 1px no-repeat;transform-origin:bottom;transition:rotate .8s var(--ease)}
.toast:hover .glass {rotate:-6deg}
.glass i {display:block;height:2.4rem;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--silver);position:relative}
.glass i::after {content:"";position:absolute;inset:1px 2px 2px;clip-path:inherit;background:var(--black)}

.gifts .lead {margin:1.25rem 0}
.links {display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}
.rsvp .display+p,.closing .display+p {margin-top:1.5rem}
.rsvp .button {margin-top:1.6rem}
.availability {font-size:.83rem;color:#c8c4bd;margin-top:1.5rem}
.calendar-date {font:400 clamp(3.25rem,10vw,7rem)/1.15 var(--serif);letter-spacing:-.065em;margin:.65rem 0 1.1rem}
.closing {position:relative;min-height:96svh;display:grid;place-items:center;text-align:center;padding:5rem var(--gutter) 7rem;overflow:hidden;isolation:isolate}
.closing::before {content:"";position:absolute;z-index:-1;inset:1rem;border:1px solid var(--rule)}
.closing .narrow {max-width:52rem}
.closing .display {font-size:clamp(3.4rem,8vw,7rem)}
.closing .romantic {margin-top:1.4rem}
.closing .date {margin-top:1.8rem}
.credit {position:absolute;bottom:2rem;left:1.4rem;right:1.4rem;color:#c8c4bd;letter-spacing:.12em}
.music {
  position:fixed;
  z-index:3;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:46px;
  padding:.55rem .95rem;
  border:1px solid #cba96680;
  border-radius:100px;
  background:#080808;
  color:var(--ivory);
  box-shadow:0 4px 16px #0004;
  font:400 .7rem/1 var(--label);
  letter-spacing:.08em;
}
.music:hover {border-color:var(--gold)}
.music-icon {
  width:.7rem;
  height:.8rem;
  background:var(--gold);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.music[data-playing="true"] .music-icon {
  background:linear-gradient(90deg,var(--gold) 0 32%,transparent 32% 68%,var(--gold) 68%);
  clip-path:none;
}
.reveal {transition:opacity .7s var(--ease),transform .85s var(--ease),clip-path .85s var(--ease);clip-path:inset(-3% -10%)}
.reveal.pending {opacity:0;transform:translateY(1.25rem);clip-path:inset(0 0 15%)}
.timeline li.pending {transform:translateY(.75rem);clip-path:none}
.timeline li {clip-path:none}

@media(max-width:940px) {
  .nav-toggle {display:flex;min-height:44px;align-items:center;gap:.75rem;background:none;border:0;padding:.5rem 0 .5rem .75rem}
  .nav-toggle span[aria-hidden="true"] {width:1rem;height:.42rem;border-block:1px solid}
  .site-nav nav {position:absolute;inset:100% 0 auto;display:grid;gap:0;background:#101010;padding:.7rem var(--gutter) 1.4rem;clip-path:inset(0 0 100%);visibility:hidden;transition:clip-path .42s var(--ease),visibility .42s}
  .site-nav nav a {min-height:47px;display:flex;align-items:center;border-top:1px solid #ffffff25}
  .site-nav nav a::after {width:1.4rem;left:auto}
  .site-nav.menu-open nav {clip-path:inset(0);visibility:visible}
}
@media(max-width:760px) {
  .families {grid-template-columns:1fr}
  .families>div+div {border-left:0;border-top:1px solid var(--rule);padding-left:0}
}
@media(max-width:360px) {
  .count-grid [data-unit] {font-size:clamp(2.05rem,11vw,2.6rem)}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.pending {opacity:1;transform:none;clip-path:none}
  .timeline {--timeline-progress:1!important}
}

.nav-controls {display:flex;align-items:center;gap:clamp(.6rem,2vw,1.5rem)}
.language {display:inline-flex;align-items:center;gap:2px;border:1px solid var(--rule);border-radius:30px;padding:2px}
.language button {border:0;border-radius:50%;background:none;min-width:40px;min-height:40px;font:400 .68rem/1 var(--label);letter-spacing:.08em}
.language button[aria-pressed="true"] {background:var(--black);color:var(--ivory)}
.site-nav .language button[aria-pressed="true"] {background:var(--ivory);color:var(--black)}
.opening>.language {position:absolute;z-index:2;top:max(.75rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right))}
.opening {padding-top:4.25rem}
@media(max-width:760px) {
  .venue-action {flex-direction:column-reverse;gap:.3rem;font-size:.53rem;letter-spacing:.07em}
  .venue-panel,.reception .venue-panel {grid-template-columns:1fr}
  .reception .venue-image,.reception .venue-copy {grid-column:auto;grid-row:auto}
}

/* Gilded frames for the opening, closing, and itinerary artwork. */
.gold-crest {display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}
.opening-crest {width:clamp(3.65rem,13vw,6.3rem);margin:0 auto .75rem;animation:opening-in .85s var(--ease) both}
.seal {background:radial-gradient(circle at 28% 20%,#3d2c17,#1c140e 67%,#0b0b0b);border-color:#a06b31}
.seal img {width:83%;height:auto}
.closing-crest {width:clamp(7rem,21vw,16rem);margin:1.15rem auto 0;filter:drop-shadow(0 7px 18px #0009)}
.timeline {padding-left:1.65rem}
.timeline::before,.timeline::after {left:1.65rem;top:1.5rem}
.timeline::after {background:#9b6a2d}
.timeline li {padding-left:clamp(2.35rem,5vw,3.5rem)}
.timeline-crest {position:absolute;z-index:1;top:.1rem;left:-1.25rem;width:2.5rem}
@media(max-width:760px) {
  .opening-inner {padding-block:.5rem}
  .opening h1 {margin-bottom:1.5rem}
}
@media(max-width:360px) {
  .venue-name {font-size:clamp(1.95rem,10vw,2.5rem)}
}
@media(max-height:700px) {
  .opening {padding-top:3.65rem}
  .opening-crest {width:3.2rem;margin-bottom:.35rem}
  .opening h1 {font-size:clamp(2.4rem,7vw,3.7rem);margin:.45rem 0 1rem}
  .envelope {width:min(81%,20rem);margin-bottom:1.15rem}
}

body {text-align:center}
section {padding-block:clamp(4.5rem,9vw,8.5rem)}
.venue {padding-block:clamp(2.5rem,5vw,5rem)}
.parents {padding-top:0}
.narrow {max-width:42rem}
.lead {font:400 clamp(2.1rem,5vw,3.4rem)/1.05 var(--serif);letter-spacing:-.02em}
.display {font:400 clamp(3rem,8vw,6.4rem)/.9 var(--serif);letter-spacing:-.035em}
.nav-mark {font:400 .68rem/1.5 var(--label);text-transform:uppercase;letter-spacing:.17em}
.venue-trigger {grid-template-columns:minmax(0,1fr) auto;gap:.85rem;text-align:left}
.venue-card {max-width:66rem}
.venue-name {font-size:clamp(2.65rem,6.6vw,5.65rem)}
.venue-copy {text-align:center}
.venue-copy .romantic {margin-inline:auto}
.timeline-crest {width:3.05rem}
@media (max-width:600px) {
  .hero-frame {inset:.85rem;top:4.9rem}
  .families {grid-template-columns:1fr}
  .families>div+div {border-top:1px solid var(--rule);border-left:0;padding:1.5rem 0 0}
  .count-grid [data-unit] {font-size:clamp(1.8rem,7vw,2.8rem)}
}

@media (max-height:650px) and (max-width:600px) {
  .hero {padding:5.9rem 1.4rem 4.65rem}
  .hero .ornament {margin:1.15rem auto}
  .hero .date {margin-top:1.2rem}
  .scroll {bottom:1.55rem}
}

/* Gold illustrations for the wedding details. */
.section-icon {display:block;width:clamp(3.75rem,8vw,6rem);height:auto;margin:0 auto 1.4rem}
.toast .section-icon {width:clamp(5.25rem,10vw,7rem);margin-bottom:1.1rem}
.venue-trigger {grid-template-columns:auto minmax(0,1fr) auto}
.venue-trigger .section-icon {width:clamp(3.15rem,6vw,5rem);margin:0}
@media(max-width:600px) {
  .venue-trigger {gap:.65rem}
  .venue-trigger .section-icon {width:2.6rem}
  .venue-name {font-size:clamp(2rem,8vw,3rem)}
}

/* Journey */
.schedule-grid {max-width:70rem}
.schedule h2 {margin-bottom:clamp(2.5rem,6vw,5rem)}
.journey {position:relative;--timeline-progress:0}
.journey-path {position:absolute;top:1.5rem;bottom:4.2rem;left:1.65rem;width:3rem;height:calc(100% - 5.7rem);overflow:visible;transform:translateX(-50%);pointer-events:none}
.journey-path path {fill:none;stroke-width:1.15;vector-effect:non-scaling-stroke}
.path-track {stroke:#c8c7c2}
.path-progress {stroke:#747474;clip-path:inset(0 0 calc((1 - var(--timeline-progress)) * 100%) 0)}
.timeline {max-width:none;padding:0;margin:0;list-style:none;text-align:left}
.timeline::before,.timeline::after {display:none}
.timeline li {position:relative;padding:0 0 1.5rem 5.4rem}
.timeline li:last-child {padding-bottom:1rem}
.journey-marker {position:absolute;z-index:1;left:1.65rem;top:1.5rem;width:.8rem;height:.8rem;transform:translate(-50%,-50%);background:#f7f5f0;border:1px solid #8a8a8a;border-radius:50%;transition:box-shadow .6s,background .6s}
.journey-card {position:relative;width:100%;max-width:36rem}
.journey-event.is-active .journey-marker {background:#bcbcbc;box-shadow:0 0 0 7px #b8b8b82b}
.journey-icon {display:block;width:3.2rem;height:3.2rem;margin:0 0 1rem;transition:transform .65s var(--ease),opacity .65s}
.journey-event.is-active .journey-icon {transform:translateY(-3px)}
.timeline time {display:block;font:400 clamp(2.4rem,5vw,4.1rem)/1 var(--serif);letter-spacing:-.035em;text-transform:none}
.timeline h3 {font:400 clamp(1.8rem,3vw,2.6rem)/1 var(--serif);margin:.45rem 0}
.timeline p {font-size:.94rem;line-height:1.7}
.journey-finale {position:relative;margin:1rem 0 0;left:1.65rem;transform:translateX(-50%);width:5rem;height:5rem;display:grid;place-items:center;border:1px solid #b8b8b8;border-radius:50%;background:#f7f5f0;color:#777}
@media(min-width:850px) {
  .journey-path {left:50%}
  .journey-marker {left:50%}
  .timeline li {padding:0 0 1.5rem;display:flex}
  .timeline li:nth-child(odd) {justify-content:flex-start;padding-right:calc(50% + 3rem);text-align:right}
  .timeline li:nth-child(even) {justify-content:flex-end;padding-left:calc(50% + 3rem)}
  .journey-finale {left:50%}
}
@media(max-width:600px) {
  .timeline li {padding-left:4.2rem}
  .journey-path,.journey-marker,.journey-finale {left:1.3rem}
}
@media(prefers-reduced-motion:reduce) {
  .path-progress {clip-path:none}
}

/* Opening calligraphy from the couple's sample. */
.hero .couple-names {margin:.75rem auto 0}
.couple-names img {
  display:block;
  width:min(82vw,28rem);
  height:auto;
  margin-inline:auto;
}
.hero.ready .couple-names {animation:names-reveal 1.1s var(--ease) both}
@keyframes names-reveal {from {opacity:0} to {opacity:1}}
.opening-crest {width:clamp(5.5rem,20vw,9rem)}
.closing-crest {width:clamp(8rem,19vw,13rem)}
@media(max-height:700px) {
  .opening-crest {width:5rem}
  .couple-names img {width:min(78vw,24rem)}
}
@media(prefers-reduced-motion:reduce) {.hero.ready .couple-names {animation:none}}
.ornament,.scroll,.journey-finale {color:#cba966}
.venue-plus {color:#bd934e}

/* Marks based on the couple's VM envelope and heart designs. */
.rsvp .section-icon {width:clamp(5.75rem,12vw,8.5rem);margin-bottom:1.8rem}
.journey-finale img {display:block;width:57%;height:auto}


@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.eyebrow,.button,.credit,.count-grid small,.envelope small,.site-nav nav,.nav-toggle {
  font-size: .72rem;
  letter-spacing: .15em;
}
.timeline p,.venue-copy p,.rsvp p,.gifts p {line-height:1.85}

/* Separate rose photographs frame each section. Each image sheet has a 4 by 4 grid. */
.floral-section {
  isolation:isolate;
  --rose-atlas:url("photos/roses-light-atlas.jpg");
  --rose-blend:multiply;
  --rose-opacity:.40;
  --rose-size:clamp(13rem,30vw,32rem);
  --rose-left-y:42%;
  --rose-right-y:60%;
}
.floral-section:not(.opening) {position:relative}
.floral-section.dark {
  --rose-atlas:url("photos/roses-dark-atlas.jpg");
  --rose-blend:screen;
  --rose-opacity:.29;
}
.floral-background {
  position:absolute;
  z-index:-1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:var(--rose-blend);
}
.floral-background::before,.floral-background::after {
  content:"";
  position:absolute;
  width:var(--rose-size);
  aspect-ratio:1;
  background-image:var(--rose-atlas);
  background-size:400% 400%;
  background-repeat:no-repeat;
  filter:grayscale(1);
  opacity:var(--rose-opacity);
  mask-image:radial-gradient(ellipse at center,#000 45%,transparent 73%);
}
.floral-background::before {
  top:var(--rose-left-y);
  left:0;
  translate:-15% -50%;
  background-position:var(--rose-left);
}
.floral-background::after {
  top:var(--rose-right-y);
  right:0;
  translate:15% -50%;
  background-position:var(--rose-right);
}

.opening {--rose-left:33.3333% 0%;--rose-right:0% 66.6667%;--rose-left-y:33%;--rose-right-y:69%}
.hero.floral-section {--rose-left:33.3333% 0%;--rose-right:100% 0%;--rose-size:clamp(16rem,38vw,42rem);--rose-opacity:.28;--rose-left-y:38%;--rose-right-y:64%}
.intro {--rose-left:0% 0%;--rose-right:66.6667% 0%;--rose-left-y:62%;--rose-right-y:75%;--rose-opacity:.30}
.parents {--rose-left:100% 0%;--rose-right:100% 33.3333%;--rose-left-y:58%;--rose-right-y:47%}
.count {--rose-left:0% 0%;--rose-right:66.6667% 0%}
.schedule {--rose-left:33.3333% 66.6667%;--rose-right:66.6667% 66.6667%;--rose-left-y:28%;--rose-right-y:72%}
.gifts {--rose-left:33.3333% 33.3333%;--rose-right:100% 66.6667%;--rose-left-y:49%;--rose-right-y:54%}
.rsvp {--rose-left:100% 66.6667%;--rose-right:66.6667% 66.6667%;--rose-left-y:56%;--rose-right-y:42%}
.calendar {--rose-left:0% 100%;--rose-right:66.6667% 100%}
.closing.floral-section {--rose-left:66.6667% 100%;--rose-right:33.3333% 100%;--rose-size:clamp(16rem,37vw,40rem);--rose-opacity:.36}

@media (max-width:700px) {
  .floral-section {
    --rose-size:clamp(8rem,43vw,15rem);
    --rose-opacity:.34;
  }
  .floral-section.dark {--rose-opacity:.23}
  .hero.floral-section,.closing.floral-section {
    --rose-size:clamp(10rem,55vw,19rem);
    --rose-opacity:.34;
  }
  .hero.floral-section {--rose-opacity:.27}
  .floral-background::before {translate:-23% -50%}
  .floral-background::after {translate:23% -50%}
}

/* Display typefaces and the welcome note. */
@font-face {
  font-family:"Playfair Display";
  src:url("fonts/playfair-display.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Playfair Display";
  src:url("fonts/playfair-display-italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face {
  font-family:"Baskervville";
  src:url("fonts/baskervville-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
.intro-copy {margin-inline:auto;max-width:38rem}
.intro-message {
  max-width:34rem;
  margin-inline:auto;
  font-size:clamp(1.15rem,2.4vw,1.52rem);
  line-height:1.55;
  text-wrap:pretty;
}
.intro-lead {font-size:clamp(1.3rem,3vw,1.84rem)}
.intro-accent {
  display:block;
  margin:.32em auto 0;
  color:#806334;
  font-size:clamp(2.35rem,5.4vw,4.25rem);
  line-height:1.12;
  text-wrap:balance;
}
.intro-divider {width:2.7rem;height:1px;background:#ad905b;margin:1.6rem auto}
.intro-signoff {display:grid;gap:.6rem;margin-top:1.9rem}
.intro-signoff .title-lettering {
  color:#806334;
  font-size:clamp(2.05rem,5vw,3.35rem);
  line-height:1.2;
}
.paired-title {
  display:grid;
  gap:.8rem;
  justify-items:center;
}
.paired-title .title-lettering {
  font-size:clamp(3.25rem,8.2vw,6.25rem);
  line-height:1;
}
.paired-title .title-caption {
  font-family:var(--label);
  font-size:clamp(.78rem,1.8vw,1.05rem);
  line-height:1.55;
  letter-spacing:.2em;
}
.closing .display.title-lettering {
  font-size:clamp(2.8rem,8.8vw,7.25rem);
  line-height:1.14;
  text-wrap:balance;
}
@media (max-width:700px) {
  .intro.floral-section {--rose-opacity:.26}
}

/* Match the invitation headings to the couple’s name artwork. */
.title-lettering {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
}
.section-title {
  max-width:38rem;
  margin-inline:auto;
  padding-inline:.22em;
  font-size:clamp(2.1rem,5.6vw,4.15rem);
  line-height:1.12;
  text-wrap:balance;
}
.opening-title {
  display:inline-block;
  padding-inline:.15em;
  font-size:clamp(2.35rem,7.4vw,4.85rem);
  line-height:1.05;
  text-wrap:balance;
}
.opening h1 em {
  display:block;
  margin-top:.25em;
  font-size:.65em;
  line-height:1.25;
}
.venue-name.title-lettering {
  padding-inline:.13em;
  font-size:clamp(2.4rem,5.6vw,4.75rem);
  line-height:1.06;
  text-wrap:balance;
}
@media (max-width:600px) {
  .venue-name.title-lettering {font-size:clamp(2.1rem,8.5vw,3rem)}
}

/* Fine gold rules and warm paper tie the invitation sections together. */
.opening::after {
  content:"";
  position:absolute;
  inset:.65rem;
  border:1px solid var(--gold-rule);
  pointer-events:none;
}
.opening-title {letter-spacing:-.045em}
.opening h1 em {color:#73582f}
.opening .button.solid,.dark .button {border-color:var(--gold)}
.site-nav {border-bottom-color:var(--gold-rule)}
.site-nav nav a::after,.reading-progress {background:var(--gold)}
.nav-mark,.city,.skip,.language button {font-family:var(--label)}
.credit a {
  display:inline-block;
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:.25em;
}
.credit a:hover {color:var(--ivory)}
@media (max-width:600px) {
  .credit {bottom:5rem}
}
.light {
  background:radial-gradient(ellipse at 50% 12%,#fdfbf6,var(--ivory) 72%);
  --rule:var(--gold-rule);
}
.dark {
  background:radial-gradient(ellipse at 50% 0%,#201b15,var(--black) 68%);
  --rule:var(--gold-rule);
}
.hero {
  background:radial-gradient(ellipse at 50% 28%,#0b0907 0%,#030303 48%,#000 83%);
}
.hero-frame {border-color:#d4b47975;box-shadow:inset 0 0 0 .26rem #0b0b0b40}
.hero-frame::before,.hero-frame::after {color:var(--gold)}
.hero .eyebrow,.closing .date {letter-spacing:.22em;color:#e4c890}
.hero .romantic {font-size:clamp(1.2rem,2.7vw,1.85rem);line-height:1.45;text-wrap:balance}
.hero .ornament {margin-block:1.05rem 1.35rem}
.hero .date {margin-top:1.45rem}
.scroll,.venue-plus {border-color:var(--gold-rule)}
.romantic,.display {line-height:1.16}
.section-title {font-size:clamp(2rem,4.8vw,3.85rem)}
.count-grid {
  border-block:1px solid var(--gold-rule);
  padding-block:.9rem;
}
.count-grid div+div,.parents .wrap {border-color:var(--gold-rule)}
.venue-name.title-lettering {
  font-size:clamp(2.05rem,4.8vw,4.3rem);
  letter-spacing:-.04em;
}
.venue-card[open] .venue-image {box-shadow:0 16px 32px #24190e14}
.journey-card p {font-size:1.06rem}
.intro-signoff .title-lettering {font-style:italic}
.toast .display {font-size:clamp(2.45rem,6.4vw,5.75rem)}
.closing .display.title-lettering {font-style:italic;letter-spacing:-.045em}
@media (max-width:600px) {
  .venue-name.title-lettering {font-size:clamp(1.85rem,7vw,2.75rem)}
  .opening-title {font-size:clamp(2rem,7.6vw,3.1rem)}
  .opening h1 em {font-size:.58em}
}

/* Gold-trimmed venue details, itinerary cards, and response cards. */
.intro-divider {position:relative;width:4rem}
.intro-divider::after {
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:.42rem;
  height:.42rem;
  background:var(--ivory);
  border:1px solid #ad905b;
  transform:translate(-50%,-50%) rotate(45deg);
}
.venue-trigger .eyebrow {color:#76582e}
.dark .venue-trigger .eyebrow {color:#ddbf86}
.venue-image {outline:1px solid var(--rule);outline-offset:.28rem}
.venue-information {
  max-width:23rem;
  margin:1.3rem auto 0;
  padding:.95rem .35rem;
  border-block:1px solid var(--rule);
}
.venue-information .venue-date {
  display:block;
  font:400 .72rem/1.6 var(--label);
  letter-spacing:.1em;
}
.venue-information .venue-hours {
  font:400 clamp(1.5rem,3.4vw,2.1rem)/1.25 var(--serif);
  margin:.25rem 0 0;
}
.venue-information .venue-address {margin-top:.55rem;line-height:1.5}
.venue-information .venue-address,.venue-copy .romantic {text-wrap:balance}
.venue-copy .button {margin-top:1.35rem}
.journey-card {
  background:#fcf8ef;
  border:1px solid #ac885d58;
  box-shadow:0 5px 20px #5434120d;
  text-align:left;
}
.journey-card[open],.journey-event.is-active .journey-card {border-color:#a77b4099}
.journey-trigger {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(.65rem,2vw,1.2rem);
  padding:clamp(.8rem,2.2vw,1.25rem);
  cursor:pointer;
  list-style:none;
}
.journey-trigger::-webkit-details-marker {display:none}
.journey-trigger .journey-icon {width:2rem;height:2rem;margin:0}
.journey-heading {display:grid;gap:.24rem}
.journey-heading time {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .45rem;
  color:#765526;
  font:400 .73rem/1.4 var(--label);
  letter-spacing:.09em;
}
.journey-day {font-size:.65rem}
.journey-title {font-size:clamp(1.3rem,3.4vw,2.15rem);line-height:1.14}
.journey-toggle {
  display:grid;
  place-items:center;
  width:1.65rem;
  height:1.65rem;
  border:1px solid #a77b4070;
  border-radius:50%;
  color:#765526;
}
.journey-toggle::before,.journey-toggle::after {
  content:"";
  grid-area:1 / 1;
  width:.62rem;
  height:1px;
  background:currentColor;
}
.journey-toggle::after {transform:rotate(90deg);transition:transform .25s var(--ease)}
.journey-card[open] .journey-toggle::after {transform:rotate(0)}
.journey-trigger:focus-visible {outline:2px solid #765526;outline-offset:-3px}
.journey-panel {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:10rem;
  display:grid;
  align-items:center;
  border-top:1px solid #ac885d4d;
  background:#f6efe3;
}
.journey-image {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  opacity:.33;
  mask-image:linear-gradient(90deg,transparent 7%,#0003 46%,#000);
}
.journey-card[open] .journey-panel {animation:journey-reveal .42s var(--ease) both}
@keyframes journey-reveal {from {opacity:0} to {opacity:1}}
.journey-copy {display:grid;justify-items:start;gap:.42rem;padding:clamp(.9rem,2.6vw,1.55rem)}
.journey-copy p {margin:0;line-height:1.45}
.journey-copy .journey-detail {font-style:italic}
.journey-copy .journey-venue {font-size:.94rem;color:#705226}
.journey-directions {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:44px;
  margin-top:.35rem;
  padding:.35rem .7rem;
  background:#2a2017;
  color:#fff5e2;
  border:1px solid #8b663a;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.1em;
  font:400 .68rem/1.45 var(--label);
}
.journey-directions:hover {background:#49351f}
.journey-directions:focus-visible {outline:2px solid #705226;outline-offset:2px}
@media (prefers-reduced-motion:reduce) {
  .journey-card[open] .journey-panel {animation:none}
  .journey-toggle::after {transition:none}
}
.response-card {
  position:relative;
  padding:clamp(2.25rem,5.2vw,4.6rem) clamp(1.1rem,4vw,3rem);
  border:1px solid var(--rule);
}
.response-card::after {
  content:"";
  position:absolute;
  inset:.38rem;
  border:1px solid var(--rule);
  pointer-events:none;
}
.rsvp .response-card {background:#110f0ccc}
.calendar .response-card {background:#fffcf4b8}
.calendar .calendar-date {color:#705226;font-size:clamp(2.65rem,8vw,5.8rem)}
@media (max-width:600px) {
  .timeline li {padding-left:3.4rem}
  .journey-trigger .journey-icon {width:1.5rem;height:1.5rem}
}
.nav-mark {display:block;flex:none;min-width:44px;padding:.3rem 0}
.nav-mark img {display:block;height:2.9rem;width:auto;margin-inline:auto}