:root {
  color-scheme: light;
  --blush: #f8e1e7;
  --rose: #d97b93;
  --maroon: #7a1f3d;
  --cream: #fffaf7;
  --ink: #49353b;
  --muted: #806f72;
  --serif: "Playfair Display", Georgia, serif;
  --script: "Great Vibes", cursive;
  --small-caps: "Cinzel", Georgia, serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
}
body, button, input, select, textarea { font-family: var(--serif); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.site-header {
  position: absolute;
  z-index: 5;
  top: var(--safe-top);
  left: 50%;
  display: flex;
  width: min(100%, 480px);
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  transform: translateX(-50%);
}
.brand { color: var(--maroon); font: 1.15rem var(--small-caps); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#language-select {
  max-width: 9rem;
  border: 1px solid #ead3d6;
  border-radius: 2rem;
  padding: .45rem 1.8rem .45rem .7rem;
  background: var(--cream);
  color: var(--maroon);
  font-size: .75rem;
}
.music-button {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid #e6c4cc;
  border-radius: 50%;
  background: rgba(255, 250, 247, .92);
  color: var(--maroon);
  font-size: 1.15rem;
  cursor: pointer;
}
.music-button.is-playing .music-icon { animation: music-spin 4s linear infinite; }
@keyframes music-spin { to { transform: rotate(360deg); } }
main { width: min(100%, 480px); margin: 0 auto; overflow: hidden; background: var(--cream); box-shadow: 0 0 45px #7a1f3d0d; }
.screen { position: relative; display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: calc(5rem + var(--safe-top)) 1.5rem calc(2.5rem + var(--safe-bottom)); text-align: center; }
.cover { isolation: isolate; gap: .25rem; padding-top: calc(4.7rem + var(--safe-top)); padding-bottom: calc(3rem + var(--safe-bottom)); background: linear-gradient(180deg, #fffaf9 0%, #fffdfb 56%, #f8f5ef 100%); }
.cover::before { position: absolute; z-index: -1; right: -22%; bottom: -13%; left: -22%; height: 35%; border-radius: 50% 50% 0 0; background: #eff0e8; content: ""; }
.cover-corner { position: absolute; z-index: -1; top: calc(3.1rem + var(--safe-top)); width: clamp(105px, 34vw, 155px); opacity: .7; pointer-events: none; }
.cover-corner-left { left: -2rem; transform: rotate(-35deg); }
.cover-corner-right { right: -2rem; transform: scaleX(-1) rotate(-35deg); }
.cover-art { position: relative; width: min(82vw, 340px); margin: .25rem auto .35rem; }
.hero-media { position: relative; overflow: hidden; border: 0; border-radius: 48% 48% 1.25rem 1.25rem; background: linear-gradient(160deg, #f4dadd, #fff5e9 65%, #d9e1cc); box-shadow: 0 15px 40px #7a1f3d18; }
.cover-photo { width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; }
.cover-video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: cover; transition: opacity .8s ease; }
.hero-media.has-video .cover-video { opacity: 1; }
.hero-media.has-video-source .cover-video { opacity: 1; }
.video-load-action { position: absolute; z-index: 2; left: 50%; top: 56%; transform: translate(-50%, -50%); width: max-content; max-width: 85%; padding: .75rem 1rem; border: 1px solid #b88f7866; border-radius: 5px; background: #fffaf7ed; color: var(--maroon); font: .8rem/1.5 var(--sans, Arial, sans-serif); cursor: pointer; }
.video-load-action:disabled { cursor: wait; }
.video-load-action[hidden] { display: none; }
.hero-media { aspect-ratio: 4 / 4.3; }
.eyebrow { margin: 0 0 .45rem; color: var(--rose); font: 500 .68rem/1.6 var(--small-caps); letter-spacing: .18em; text-transform: uppercase; }
.script-title { margin: 0; color: var(--maroon); font: 4.35rem/.9 var(--script); font-weight: 400; }
.cover-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .12em; font-size: clamp(2.65rem, 12vw, 4rem); line-height: 1; }
.ampersand { color: var(--rose); }
.cover-title .ampersand { margin: 0; font-size: .65em; }
.cover > .eyebrow { margin-top: .2rem; }
.cover-date { margin: .25rem 0 .8rem; color: var(--muted); font: .72rem var(--small-caps); letter-spacing: .16em; text-transform: uppercase; }
.cover-invitation-button { display: flex; width: min(78vw, 292px); min-height: 5.8rem; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; border: 1px solid #ffffff; border-radius: 4rem; padding: .9rem 1.2rem; background: #fffdf5e8; box-shadow: 0 12px 35px #766a541c, inset 0 0 0 1px #d8cdbd55; color: var(--maroon); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.cover-invitation-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px #766a5429, inset 0 0 0 1px #d8cdbd70; }
.cover-button-title { font: 500 .76rem var(--small-caps); letter-spacing: .27em; text-transform: uppercase; }
.cover-button-divider { width: 2.2rem; height: 1px; background: #c7aa76; }
.cover-button-hint { color: #968d7f; font: .57rem var(--small-caps); letter-spacing: .24em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2rem; padding: .75rem 1.5rem; font: 500 .7rem var(--small-caps); letter-spacing: .12em; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--maroon); color: white; box-shadow: 0 7px 18px #7a1f3d24; }
.button-primary:hover { background: #60162f; }
.button-outline { border-color: #d9b1bb; color: var(--maroon); }
.button-outline:hover { background: var(--blush); }
.button-whatsapp { margin-top: 1rem; border-color: #90b99b; color: #27613c; }
.button-whatsapp:hover { background: #edf8ef; }
.cover-scroll { position: absolute; bottom: calc(1rem + var(--safe-bottom)); color: var(--rose); font-size: 1.2rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.section-pad { padding: 5rem 1.55rem; }
.names-section { position: relative; min-height: 74svh; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #fff8f5, #f9e8eb); text-align: center; }
.section-flower { position: absolute; top: 4%; right: -17%; width: 58%; opacity: .2; transform: rotate(110deg); }
.names-title { display: flex; flex-direction: column; gap: .12em; margin: 1.4rem 0; font-size: 5rem; }
.names-title .ampersand { font-size: .62em; }
.names-caption { color: var(--muted); font-size: .95rem; font-style: italic; }
.ornament { margin-top: 1.15rem; color: var(--rose); font-size: 1.2rem; }
.story-section { text-align: center; }
.section-heading { margin: 0 auto 2rem; text-align: center; }
.section-heading h2, .invitation-card h2, .venue-card h3 { margin: 0; color: var(--maroon); font-size: 1.85rem; font-weight: 500; line-height: 1.25; }
.section-heading > p:not(.eyebrow) { margin: .6rem 0 0; color: var(--muted); font-size: .91rem; }
.photo-collage { position: relative; width: 100%; max-width: 365px; height: 370px; margin: 0 auto 1.7rem; }
.arch-photo { position: absolute; overflow: hidden; margin: 0; border: 7px solid #fff; box-shadow: 0 12px 30px #7a1f3d15; }
.arch-photo img { width: 100%; height: 100%; object-fit: cover; }
.arch-photo-main { top: 0; left: 5%; width: 68%; height: 82%; border-radius: 48% 48% 12px 12px; }
.arch-photo-small { right: 2%; bottom: 0; width: 41%; height: 46%; border-radius: 50% 50% 10px 10px; background: #fff; }
.arch-photo-small img { padding: 1.2rem; }
.collage-heart { position: absolute; top: 52%; right: 10%; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--cream); color: var(--rose); font-size: 1.5rem; }
.story-copy { max-width: 320px; margin: 0 auto; color: var(--muted); font-size: 1rem; font-style: italic; }
.invitation-section { padding-top: 1rem; padding-bottom: 5rem; }
.invitation-card { position: relative; overflow: hidden; border: 1px solid #efd8dc; border-radius: 190px 190px 12px 12px; padding: 4rem 1.5rem 2.5rem; background: linear-gradient(180deg, #f9e9ec, #fffaf7 60%); text-align: center; }
.card-flower { width: 90px; margin: 0 auto 1rem; opacity: .75; }
.invitation-card h2 { font-family: var(--small-caps); font-size: 1.3rem; }
.invitation-card > p:not(.eyebrow) { margin: .65rem 0; color: var(--muted); font-size: .9rem; }
.invitation-couple { display: flex; flex-direction: column; gap: .2rem; color: var(--maroon) !important; font: 2.3rem/.95 var(--script); }
.invitation-couple span:nth-child(2) { color: var(--rose); font-size: 1.55rem; }
.invitation-card .invitation-date { margin-top: 1.3rem; color: var(--maroon); font: .72rem var(--small-caps); letter-spacing: .15em; text-transform: uppercase; }
.events-section { background: #fff6f3; text-align: center; }
.countdown-card { margin: 0 0 1.5rem; border: 1px solid #efd8dc; border-radius: 1rem; padding: 1.15rem .5rem; background: #fffaf7; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; }
.countdown > div { display: flex; flex-direction: column; align-items: center; }
.countdown strong { color: var(--maroon); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.countdown span { color: var(--muted); font: .55rem var(--small-caps); letter-spacing: .05em; text-transform: uppercase; }
.event-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; text-align: center; }
.event-card { position: relative; border: 1px solid #eadcc9; border-radius: 1rem; padding: 1.35rem 1rem 1.2rem; background: linear-gradient(150deg, #fffdfa, #fff9f5); box-shadow: 0 8px 22px #7a1f3d0b; }
.event-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin: 0 auto .75rem; border: 2px solid #d9bd83; border-radius: 50%; background: var(--maroon); color: #fff5d9; font-size: 1.3rem; }
.event-card h3 { margin: 0 0 .55rem; color: var(--maroon); font: 600 .9rem var(--small-caps); letter-spacing: .12em; text-transform: uppercase; }
.event-meta { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .25rem 0; color: var(--muted); font-size: .82rem; }
.event-meta span { color: #a98a4b; font-size: 1rem; }
.event-address { margin: .45rem 0 .75rem; color: var(--muted); font-size: .76rem; }
.event-directions { color: var(--maroon); font: 500 .62rem var(--small-caps); letter-spacing: .1em; text-decoration-color: #ddb5bf; text-underline-offset: 3px; text-transform: uppercase; }
.venue-section { text-align: center; }
.venue-card { padding: .7rem .7rem 1.3rem; border: 1px solid #efd8dc; border-radius: 1rem; background: white; box-shadow: 0 10px 30px #7a1f3d0a; }
.venue-image { width: 100%; height: 175px; margin-bottom: 1.1rem; border-radius: .65rem; object-fit: cover; }
.venue-card h3 { font-size: 1.35rem; }
.venue-card > p { margin: .35rem .5rem 1rem; color: var(--muted); font-size: .82rem; }
.map-frame { overflow: hidden; height: 190px; margin: 0 0 1rem; border-radius: .65rem; background: var(--blush); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.gallery-section { background: #fff6f3; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.gallery-item { overflow: hidden; aspect-ratio: 1; border: 5px solid #fff; border-radius: 42% 42% 8px 8px; padding: 0; background: var(--blush); box-shadow: 0 6px 16px #7a1f3d12; cursor: zoom-in; }
.gallery-item:nth-child(even) { margin-top: 1.4rem; border-radius: 8px 8px 42% 42%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.rsvp-section { text-align: center; }
.rsvp-form { display: grid; gap: .55rem; text-align: left; }
.rsvp-form label { margin-top: .45rem; color: var(--maroon); font: 500 .65rem var(--small-caps); letter-spacing: .08em; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { width: 100%; min-height: 2.8rem; border: 1px solid #e8d4d7; border-radius: .55rem; padding: .7rem .8rem; background: white; color: var(--ink); font-size: .95rem; }
.rsvp-form textarea { resize: vertical; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: 2px solid #d97b9370; outline-offset: 1px; }
.rsvp-form .button { margin-top: .5rem; }
.form-status { min-height: 1.5em; margin: .25rem 0 0; color: var(--maroon); font-size: .85rem; text-align: center; }
.form-status.is-error { color: #a32636; }
.form-status.is-success { color: #286441; }
.form-note { margin: 0; color: var(--muted); font-size: .75rem; text-align: center; }
.footer-couple { margin: 1rem 0 0; color: var(--maroon); font: 1rem var(--small-caps); letter-spacing: .06em; }
.lightbox { width: min(92vw, 480px); max-height: 90svh; border: 0; border-radius: 1rem; padding: .6rem; background: var(--cream); box-shadow: 0 18px 60px #2c15204d; }
.lightbox::backdrop { background: #2c1520bf; }
.lightbox img { max-width: 100%; max-height: 80svh; margin: auto; border-radius: .6rem; }
.lightbox-close { position: absolute; top: .8rem; right: .8rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: var(--cream); color: var(--maroon); font-size: 1.6rem; cursor: pointer; }
.reveal { opacity: 1; transform: none; }

/* An intimate invitation, with room for the photographs to breathe. */
:root { --gold: #b19560; --body-font: "DM Sans", Arial, sans-serif; }
body, button, input, select, textarea { font-family: var(--body-font); }
body { background: #f3eeea; }
main { width: min(100%, 1120px); overflow: clip; box-shadow: 0 0 80px #49353b0a; }
.site-header { width: min(100%, 1120px); padding-inline: clamp(1.2rem, 5vw, 4rem); }
.cover { min-height: min(900px, 100svh); padding: 6rem 2rem 4rem; }
.cover::before { background: #efe8de; height: 24%; }
.cover-art { width: min(76vw, 340px); margin: 0 auto 1.8rem; }
.hero-media { border-radius: 48% 48% 5px 5px; outline: 1px solid #b1956066; outline-offset: 9px; box-shadow: 0 24px 50px #49353b18; }
.cover-photo { aspect-ratio: 4 / 4.3; object-position: center 36%; }
.cover-video { object-position: center 36%; }
.cover-copy { text-align: center; }
.cover-title { font-size: clamp(3.2rem, 9vw, 5.8rem); }
.cover-date { margin: 1.4rem 0 .6rem; font-size: .85rem; color: var(--maroon); letter-spacing: .1em; }
.cover-venue { max-width: 30ch; margin: 0 auto 1.4rem; color: var(--muted); font-size: .9rem; }
.cover-invitation-button { min-height: 3.5rem; width: auto; max-width: 285px; margin: auto; background: var(--maroon); color: white; border-color: var(--maroon); padding: 1rem 1.8rem; }
.cover-button-title { font-size: .72rem; letter-spacing: .15em; }
.cover-button-hint, .cover-button-divider { display: none; }
.cover-corner { opacity: .3; width: 190px; }
.guest-nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: .6rem 1rem; background: #fffaf7f5; backdrop-filter: blur(14px); border-block: 1px solid #b1956033; }
.guest-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--maroon); font-size: .85rem; }
.guest-nav a:last-child { font-weight: 600; }
.section-pad { padding: clamp(3.5rem, 8vw, 7rem) clamp(1.4rem, 7vw, 6rem); }
.eyebrow { color: #9b5267; font-size: .75rem; letter-spacing: .13em; }
.names-section { min-height: auto; background: #f7e9e9; }
.names-title { flex-direction: row; align-items: baseline; gap: .2em; flex-wrap: wrap; justify-content: center; font-size: clamp(3rem, 8vw, 5rem); }
.names-caption { margin-bottom: .4rem; }
.invitation-message { max-width: 43ch; margin: .5rem auto 1.6rem; color: var(--muted); }
.invitation-date { font: .85rem var(--small-caps); color: var(--maroon); }
.section-heading h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); }
.story-section { display: grid; gap: 1rem 3rem; align-items: center; }
.story-copy { max-width: 38ch; font-size: 1.05rem; line-height: 1.9; font-style: normal; }
.arch-photo-main { border-radius: 46% 46% 4px 4px; }
.arch-photo-small { border-radius: 4px; transform: rotate(7deg); }
.arch-photo-small img { padding: 0; object-position: center 35%; }
.countdown-card { max-width: 660px; margin: 0 auto 3rem; padding: 1.8rem 1rem; background: transparent; border: 0; border-block: 1px solid #b1956066; border-radius: 0; }
.countdown strong { font: 500 clamp(2rem, 6vw, 3.7rem) var(--serif); }
.countdown span { font: .75rem var(--body-font); margin-top: .4rem; }
.event-list { position: relative; max-width: 580px; margin: 0 auto 1.5rem; gap: 0; text-align: left; }
.event-list::before { position: absolute; left: 23px; top: 24px; bottom: 40px; width: 1px; background: var(--gold); content: ""; }
.event-card { padding: .5rem 0 2rem 4.5rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.event-icon { position: absolute; left: 0; top: .3rem; width: 48px; height: 48px; border: 1px solid var(--gold); background: var(--cream); color: var(--maroon); font: .9rem var(--small-caps); }
.event-card h3 { font-size: .95rem; letter-spacing: .05em; }
.event-meta { justify-content: flex-start; font-size: .9rem; }
.event-meta:last-child { color: var(--maroon); font-size: 1.5rem; font-family: var(--serif); }
.event-shared-venue { color: var(--muted); margin-bottom: 1.8rem; }
.venue-card { max-width: 760px; margin: auto; padding: 1rem 1rem 1.8rem; border-radius: 6px; }
.venue-card h3 { font-family: var(--serif); }
.venue-image { height: clamp(220px, 35vw, 360px); border-radius: 3px; }
.map-frame { height: 230px; border-radius: 3px; }
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gallery-item, .gallery-item:nth-child(even) { aspect-ratio: 4 / 5; border: 0; margin: 0; border-radius: 4px; box-shadow: none; }
.gallery-item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gallery-item:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery-item img { object-position: center 35%; }
.rsvp-section { background: #f7e9e9; }
.rsvp-form { max-width: 500px; margin: auto; }
.rsvp-form label { font: 500 .9rem var(--body-font); letter-spacing: 0; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { font-size: 1rem; }
.button { font-family: var(--body-font); font-size: .8rem; letter-spacing: .06em; }
.button-whatsapp { padding: 1rem 2rem; }
.button-whatsapp.button-primary { background: var(--maroon); border-color: var(--maroon); color: white; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
@media (min-width: 800px) {
  .cover { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; min-height: 760px; padding-inline: 5rem; }
  .cover-art { width: 100%; max-width: 400px; margin: 0; }
  .cover-photo { aspect-ratio: 4 / 5; }
  .cover-title { flex-direction: column; align-items: center; gap: .12em; }
  .cover-corner-left { top: auto; bottom: -3rem; }
  .story-section { grid-template-columns: 1.1fr 1fr; }
  .story-section .section-heading { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .photo-collage { grid-column: 1; grid-row: 1 / 3; margin: 0; height: 440px; max-width: none; }
  .story-copy { grid-column: 2; align-self: start; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .gallery-item:last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* Watercolor invitation styling drawn from the supplied mobile reference. */
:root { --rose: #bc7485; --maroon: #7a263d; --cream: #fffaf5; --ink: #4c343a; --muted: #82747a; --gold: #b89a6a; }
body { background: #f7eeeb url("assets/img/watercolor-paper.webp") center top / cover fixed; }
main { background: transparent; box-shadow: none; }
.site-header { background: #fffaf58c; backdrop-filter: blur(7px); }
.brand { font-size: 1.25rem; }
.cover { background: transparent; }
.cover::before { background: #f5e8e399; }
.cover-corner, .section-flower, .card-flower { display: none; }
.hero-media { border: 1px solid #b88f7866; border-radius: 47% 47% 4px 4px; outline: 0; box-shadow: 0 12px 34px #7a263d17; background: #f4e9df; }
.cover-photo, .cover-video { object-position: center 30%; }
.cover > .eyebrow { color: var(--maroon); margin-top: .35rem; }
.cover-title { color: var(--maroon); }
.cover-date { color: var(--maroon); }
.cover-invitation-button { min-height: 4.6rem; border: 1px solid #9d6372; border-radius: 4px; background: #fffaf0e8; color: var(--maroon); box-shadow: 0 6px 18px #6d344012; }
.cover-button-title { font-size: .76rem; letter-spacing: .17em; }
.cover-scroll { color: #a55c73; }
.guest-nav { background: #fffaf5ed; border-color: #d8a7a544; }
.guest-nav a { color: var(--maroon); font-family: var(--small-caps); font-size: .7rem; letter-spacing: .06em; }
.section-pad { padding-block: 4.5rem; }
.names-section, .story-section, .events-section, .venue-section, .gallery-section, .rsvp-section, .wishes-section { background: transparent; }
.names-section { min-height: 62svh; }
.names-title { color: var(--maroon); text-shadow: 0 1px #fff7; }
.names-caption { color: #74636a; }
.ornament { color: #b28a60; }
.section-heading h2, .invitation-card h2, .venue-card h3 { color: var(--maroon); }
.section-heading h2 { font-weight: 500; }
.story-section .section-heading h2 { color: var(--maroon); font: 400 3.2rem/.98 var(--script); }
.eyebrow { color: #98636d; }
.photo-collage { height: auto; max-width: 355px; aspect-ratio: 4 / 5; margin: 0 auto 1rem; }
.arch-photo { border: 0; box-shadow: none; background: transparent; }
.arch-photo-main { top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; }
.arch-photo-main img { object-fit: contain; }
.arch-photo-small { right: -2%; bottom: 1%; width: 37%; height: 40%; overflow: hidden; border: 5px solid #fffaf0d9; border-radius: 48%; box-shadow: 0 6px 22px #51333a1d; }
.arch-photo-small img { padding: 0; object-fit: cover; }
.collage-heart { top: 48%; right: -2%; background: #fff9f3; color: #a9546b; }
.story-copy { color: #776a70; font-family: var(--serif); }
.invitation-section { display: none; }
.countdown-card { background: #fffaf58c; border-color: #b1956055; }
.event-card { background: transparent; }
.event-card h3 { color: var(--maroon); }
.event-icon { border-color: #b89a6a; color: var(--maroon); background: #fffaf4; }
.event-meta, .event-shared-venue { color: #786970; }
.venue-card { border: 1px solid #d9b5a899; background: #fffaf0b8; box-shadow: 0 9px 25px #7a263d0c; }
.venue-image { border: 5px solid #fffaf0; }
.map-frame { border: 1px solid #e8d6c9; }
.gallery-section { position: relative; }
.gallery-item, .gallery-item:nth-child(even) { border: 5px solid #fffaf0dd; box-shadow: 0 6px 17px #49353b12; }
.rsvp-form { padding: 1rem; border: 1px solid #d9b5a899; border-radius: 8px; background: #fffaf0a8; }
.button-primary { background: var(--maroon); }
.button-primary:hover { background: #681d34; }
.button-whatsapp { color: #6e674b; border-color: #bdab79; }
@media (min-width: 800px) {
  .cover { background: transparent; }
  .story-section { grid-template-columns: 1.1fr 1fr; }
  .photo-collage { height: 470px; aspect-ratio: auto; }
}
@media (max-height: 740px) and (max-width: 799px) {
  .cover { min-height: 740px; }
  .cover-art { width: min(62vw, 270px); }
}

@media (min-width: 600px) {
  body { padding: 0 1.5rem; background: #f5eaeb; }
  .site-header { width: min(calc(100% - 3rem), 1120px); }
  main { border-right: 1px solid #f0e2e3; border-left: 1px solid #f0e2e3; }
}
@media (max-height: 740px) {
  .cover-art { width: min(52vw, 220px); margin-bottom: .3rem; }
  .cover-invitation-button { min-height: 5rem; }
  .cover-title { font-size: 3.6rem; }
  .screen { padding-top: calc(4rem + var(--safe-top)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 800px) {
  .cover-art { width: 100%; max-width: 400px; margin: 0; }
  .cover-title { font-size: clamp(3.5rem, 6vw, 5.8rem); }
}

/* Clear, elegant letterforms for the couple's names. */
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.gallery-item, .gallery-item:nth-child(even), .gallery-item:first-child, .gallery-item:last-child {
  aspect-ratio: 4 / 5;
  grid-row: auto;
}
.gallery-item img { object-fit: contain; object-position: center; }
.gallery-item:hover img { transform: none; }
@media (min-width: 800px) {
  .gallery-item:first-child, .gallery-item:last-child { grid-column: auto; }
}

.cover-title, .names-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 7.8vw, 3rem);
  line-height: 1.25;
  letter-spacing: .015em;
  gap: 0 .2em;
  text-shadow: none;
}
.cover-title .ampersand, .names-title .ampersand {
  font-size: .72em;
  font-style: italic;
}
@media (min-width: 800px) {
  .cover-title { font-size: clamp(2.8rem, 4.5vw, 4.2rem); gap: .05em; }
}

.closing-footer { padding-top: 2rem; padding-bottom: 3rem; border-top: 1px solid #d9b5a855; text-align: center; }
.closing-divider { margin-bottom: .8rem; color: #b19560; font-size: 1.3rem; }
.closing-footer > p { margin: .5rem 0; color: #806f72; font-size: .9rem; }
.closing-footer > .closing-signature { margin-top: .9rem; color: var(--maroon); font: 500 clamp(1.2rem, 4.5vw, 1.65rem)/1.4 var(--serif); }
.rsvp-form { position: relative; padding: 1.5rem; border-radius: 1rem; }
.rsvp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-form .button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.rsvp-form .form-note { margin-top: .5rem; line-height: 1.6; }
.button-venue {
  width: calc(100% - 1rem);
  max-width: 300px;
  min-height: 3.4rem;
  margin-top: .3rem;
  border: 1px solid #9d6372;
  border-radius: 5px;
  background: #fffaf0e8;
  box-shadow: 0 6px 18px #6d344012;
  color: var(--maroon);
  font: 500 .75rem var(--small-caps);
  letter-spacing: .14em;
}
.button-venue:hover { background: #f7e8e4; border-color: var(--maroon); }