:root {
  --bg:#061811;
  --panel:#09251c;
  --cream:#f4e8c6;
  --gold:#d4bc7a;
  --muted:#c9caba;
  --line:rgba(221,197,136,.52);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',Arial,sans-serif;
  --script:'Great Vibes','Brush Script MT',cursive
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body {
  margin:0;
  background:radial-gradient(ellipse at 50% 15%,#163c28 0,transparent 56%),var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.55
}

body:before,body:after {
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  width:max(7vw,35px);
  background:url('../img/botanica.jpg') center/100% auto repeat-y;
  z-index:-1;
  pointer-events:none
}

body:before {
  left:0
}

body:after {
  right:0;
  transform:scaleX(-1)
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea,select {
  font:inherit
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid #f2d68e;
  outline-offset:4px
}

img {
  max-width:100%;
  display:block
}

button {
  color:inherit
}

h1,h2,h3,p {
  margin:0
}

h2 {
  font:500 44px/.9 var(--serif);
  letter-spacing:-1.4px
}

p+p {
  margin-top:10px
}

[hidden] {
  display:none!important
}

.page-shell {
  max-width:1120px;
  margin:0 auto;
  border-inline:1px solid rgba(211,189,133,.35);
  box-shadow:0 0 80px #0009;
  background:linear-gradient(90deg,#071c15db,#071c1555,#071c15db)
}

.header {
  height:68px;
  padding:0 36px;
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:35px;
  background:#051710e8;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}

.monogram {
  font:42px var(--serif);
  display:flex;
  align-items:center;
  gap:5px
}

.monogram span {
  font-size:17px;
  text-shadow:0 0 14px #e6c985
}

nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex:1
}

nav a {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:23px 0;
  position:relative
}

nav a:after {
  content:"";
  position:absolute;
  bottom:16px;
  height:1px;
  background:var(--gold);
  left:0;
  right:100%;
  transition:right .25s
}

nav a:hover:after,nav a.active:after {
  right:0
}

.button {
  border:1px solid var(--gold);
  border-radius:30px;
  min-height:36px;
  padding:9px 23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:linear-gradient(115deg,#334c2933,#0008);
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:9px;
  font-weight:600;
  line-height:1.4;
  box-shadow:inset 0 0 5px #cfb97a30,0 0 7px #ddc27916;
  transition:background .25s,box-shadow .25s,transform .25s
}

.button:hover {
  background:#4e5e344d;
  box-shadow:0 0 17px #dabd7445;
  transform:translateY(-2px)
}

.button span {
  font-size:16px;
  line-height:10px
}

.header-rsvp {
  min-height:30px;
  padding:6px 18px;
  letter-spacing:2px
}

.menu-toggle {
  display:none
}

.hero {
  position:relative;
  min-height:536px;
  overflow:hidden;
  isolation:isolate;
  background:#06190f
}

.hero-photo {
  position:absolute;
  inset:0 0 0 auto;
  width:58%;
  background:url('../img/rochi-hero.jpg') center top/cover no-repeat;
  mask-image:linear-gradient(90deg,transparent,#000 35%);
  z-index:-2
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#061a11 3%,#061a11f0 23%,#061a1160 42%,transparent 70%),linear-gradient(0deg,#061b14,transparent 23%);
  z-index:-1
}

.hero-content {
  padding:45px 0 27px 66px;
  width:56%
}

.eyebrow {
  text-transform:uppercase;
  font-size:9px;
  font-weight:500;
  letter-spacing:4px;
  color:var(--cream)
}

.hero-content>.eyebrow {
  letter-spacing:7px;
  font-size:10px;
  margin-bottom:0
}

h1 {
  font:600 clamp(95px,11vw,150px)/.95 var(--serif);
  letter-spacing:-7px;
  position:relative;
  width:fit-content;
  text-shadow:1px 2px 0 #5e5639,0 0 23px #e5be6630
}

.sparkle {
  font-size:35px;
  position:absolute;
  right:-17px;
  top:8px;
  text-shadow:0 0 15px #f9e39c
}

.script {
  font-family:var(--script);
  font-weight:400;
  color:#f1dc9e;
  text-shadow:0 0 12px #efd99b42
}

.hero-script {
  font-size:70px;
  line-height:1;
  margin:0 0 22px 61px;
  transform:rotate(-6deg);
  width:fit-content
}

.hero-intro {
  font-size:12px;
  line-height:1.6;
  letter-spacing:.15px
}

.hero-date {
  font:500 35px var(--serif);
  letter-spacing:5px;
  margin:14px 0 12px
}

.button-glow {
  min-height:43px;
  padding:11px 27px;
  border-color:#e5cf92;
  background:linear-gradient(100deg,#8e834455,#152314c7);
  box-shadow:inset 0 0 6px #e9d69b85,0 0 17px #e9d28b60
}

.quick-rsvp {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d2bf7940;
  border-radius:20px;
  width:fit-content;
  margin-top:10px;
  padding:6px 16px;
  font-size:10px
}

.quick-rsvp:hover {
  border-color:var(--gold)
}

.hero-quote {
  position:absolute;
  right:22px;
  top:110px;
  transform:rotate(-14deg);
  font-size:25px;
  text-align:center;
  line-height:1.1;
  text-shadow:0 2px 7px #000,0 0 6px #000
}

.panel {
  border:1px solid var(--line);
  border-radius:17px;
  background:radial-gradient(ellipse at 80% 100%,#315d3633,transparent 60%),linear-gradient(120deg,#051a14f2,#0a2319db);
  box-shadow:inset 0 0 16px #bca5620e,0 7px 18px #0002;
  overflow:hidden
}

.countdown {
  position:relative;
  margin:-7px 28px 12px;
  padding:12px 28px 18px;
  backdrop-filter:blur(8px);
  background:linear-gradient(100deg,#062219e8,#173b2acf,#041810e8);
  box-shadow:inset 0 0 18px #cfca8523,0 0 30px #07160e80
}

.countdown>.eyebrow {
  text-align:center;
  font-size:8px;
  letter-spacing:5px
}

.countdown-values {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:850px;
  margin:0 auto
}

.countdown-values>div {
  text-align:center;
  position:relative
}

.countdown-values>div+div:before {
  content:"";
  height:47%;
  width:1px;
  position:absolute;
  top:27%;
  left:0;
  background:linear-gradient(transparent,var(--gold),transparent)
}

.countdown-values span {
  display:block;
  font:500 69px/.95 var(--serif);
  font-variant-numeric:tabular-nums;
  color:#e6d19a;
  text-shadow:0 0 18px #e0c98726
}

.countdown-values small {
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase
}

.event-started {
  text-align:center;
  font:26px var(--serif);
  padding-top:8px
}

.venue {
  margin:0 10px;
  display:grid;
  grid-template-columns:30% 40% 30%;
  min-height:300px;
  position:relative
}

.venue-copy {
  padding:22px 26px
}

.venue .eyebrow {
  margin-bottom:9px
}

.venue h2 {
  font-size:61px;
  line-height:.81
}

.address {
  display:flex;
  gap:12px;
  font-size:11px;
  line-height:1.5;
  margin:23px 0 17px
}

.address>span:first-child {
  font-size:30px;
  color:var(--gold);
  line-height:1.2
}

.venue-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.venue-date {
  padding:24px 27px
}

.day-label {
  display:flex;
  align-items:center;
  gap:12px
}

.day-label:after {
  content:"";
  height:1px;
  background:var(--line);
  flex:1
}

.date-display {
  display:flex;
  gap:13px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:8px
}

.date-display strong {
  font:500 101px/.8 var(--serif)
}

.date-display>span {
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:17px;
  line-height:1.4
}

.time {
  font:29px var(--serif);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:7px
}

.small-star {
  display:block;
  color:var(--gold);
  line-height:1;
  margin:6px 0
}

.venue-date>p:last-child {
  font-size:11px;
  max-width:200px
}

.timeline {
  margin:0 10px 12px;
  padding:15px 25px 16px;
  border-top:0;
  border-radius:0 0 17px 17px;
  background:linear-gradient(100deg,#0a2418db,#031710,#122819db)
}

.timeline>.eyebrow {
  text-align:center;
  font-size:8px;
  letter-spacing:4px
}

.timeline ol {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  list-style:none;
  padding:0;
  margin:10px 0 0
}

.timeline li {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:11px;
  position:relative
}

.timeline-icon {
  font:33px/1.1 Georgia,serif;
  color:var(--gold);
  margin-bottom:16px
}

.timeline li:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:44px;
  height:1px;
  background:linear-gradient(90deg,#c2ae6440,#b5ad75,#c2ae6440)
}

.timeline li:before {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--cream);
  top:42px;
  box-shadow:0 0 7px #e2cc89
}

.timeline time {
  font-size:14px;
  line-height:1.25
}

.timeline li>span:last-child {
  font-size:10px
}

.two-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 10px 12px
}

.feature-card {
  position:relative;
  min-height:220px;
  isolation:isolate
}

.feature-card img {
  position:absolute;
  right:0;
  top:0;
  width:49%;
  height:100%;
  object-fit:cover;
  z-index:-2
}

.feature-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#061c13 5%,#061c13f0 32%,#061c13b3 53%,transparent 76%);
  z-index:-1
}

.card-content {
  padding:20px 25px
}

.card-content .eyebrow {
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:8px
}

.card-content h2 {
  font-size:35px;
  line-height:.91;
  letter-spacing:-.8px
}

.card-content p:not(.eyebrow) {
  font-size:11px;
  line-height:1.5;
  max-width:59%;
  margin:12px 0
}

.card-content .button {
  padding:8px 19px;
  min-height:32px;
  font-size:8px;
  letter-spacing:1.3px;
  gap:12px
}

.rsvp {
  display:grid;
  grid-template-columns:42% 58%;
  margin:0 10px 12px;
  min-height:348px
}

.rsvp-photo {
  position:relative;
  overflow:hidden
}

.rsvp-photo img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:center
}

.rsvp-content {
  padding:20px 25px
}

.rsvp h2 {
  font-size:44px
}

.rsvp-intro {
  font-size:11px;
  margin:8px 0 15px
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 13px
}

.field {
  min-width:0
}

label,legend {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  display:block;
  margin-bottom:5px
}

label span {
  font-size:8px;
  text-transform:none;
  letter-spacing:.1px
}

input:not([type=radio]),textarea {
  border:1px solid #c7c59a45;
  background:#061a14bf;
  border-radius:5px;
  min-height:33px;
  color:var(--cream);
  width:100%;
  padding:8px 9px;
  font-size:10px;
  transition:border-color .2s;
  resize:vertical
}

input::placeholder,textarea::placeholder {
  color:#b5baaa;
  opacity:1
}

input:focus,textarea:focus {
  border-color:var(--gold)
}

input:disabled {
  opacity:.45
}

fieldset {
  margin:0;
  padding:0;
  border:0;
  min-width:0
}

legend {
  padding:0
}

.radio-options {
  display:flex;
  gap:7px
}

.radio-options label {
  font-size:9px;
  letter-spacing:0;
  text-transform:none;
  display:flex;
  gap:5px;
  align-items:center;
  border:1px solid #c7c59a45;
  border-radius:5px;
  min-height:33px;
  padding:5px;
  flex:1;
  margin:0;
  white-space:nowrap
}

.radio-options input {
  accent-color:#dfc687;
  margin:0;
  width:12px;
  height:12px
}

.button-filled {
  color:#1b2617;
  background:linear-gradient(100deg,#bda06a,#f0dca7 48%,#cbb07a);
  box-shadow:inset 0 0 6px #ffffdaa0,0 0 16px #d8c58738;
  border-color:#ecd49a
}

.button-filled:hover {
  background:linear-gradient(100deg,#d3b783,#ffe6af,#d3b783)
}

.submit-button {
  width:100%;
  margin-top:13px;
  min-height:34px;
  font-size:8px
}

.form-notice {
  font-size:9px;
  color:#bdc3b0;
  line-height:1.5;
  margin-top:8px
}

.form-status {
  font-size:11px;
  color:var(--cream);
  margin-top:8px
}

.form-status:empty {
  display:none
}

.text-button {
  border:0;
  border-bottom:1px solid #bea772;
  background:transparent;
  color:var(--cream);
  padding:3px 0;
  font-size:11px
}

.bottom-cards .feature-card {
  min-height:182px
}

.message-card .card-content {
  padding:19px 25px
}

.message-card .card-content h2 {
  text-transform:uppercase;
  font-size:26px;
  letter-spacing:2px
}

.message-card .card-content .eyebrow {
  margin-bottom:4px
}

.message-card img {
  width:50%;
  object-position:20% 50%
}

.message-card .card-content p:not(.eyebrow) {
  max-width:61%;
  margin:7px 0 12px;
  font-size:10px
}

.gift-card {
  padding:19px 24px
}

.gift-card .eyebrow {
  font-size:8px;
  letter-spacing:3px
}

.gift-card h2 {
  text-transform:uppercase;
  font-size:24px;
  letter-spacing:1.4px;
  margin:4px 0 9px
}

.gift-card p:not(.eyebrow) {
  font-size:10px
}

.alias-row {
  display:flex;
  gap:15px;
  align-items:center;
  border:1px solid #d2bf7940;
  border-radius:9px;
  padding:5px 8px;
  margin-top:12px
}

.alias-row>span {
  font-size:25px;
  color:var(--gold)
}

.alias-row strong {
  font-size:11px;
  letter-spacing:2px;
  font-weight:500;
  flex:1
}

.alias-row .button {
  font-size:8px;
  min-height:28px;
  padding:5px 15px
}

.closing {
  position:relative;
  min-height:230px;
  margin:0 0 -1px;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  isolation:isolate;
  overflow:hidden
}

.closing img {
  position:absolute;
  z-index:-2;
  left:0;
  top:0;
  width:69%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.closing:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,transparent 25%,#061b139c 48%,#061b13 70%)
}

.closing>div {
  text-align:center;
  width:45%;
  padding:20px
}

.closing-name {
  font:600 88px/.8 var(--serif);
  letter-spacing:-3px
}

.closing-name span {
  font-size:25px;
  vertical-align:top
}

.closing .script {
  font-size:45px;
  line-height:1.2;
  margin:0
}

.closing .eyebrow {
  font-size:8px;
  letter-spacing:4px;
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:10px
}

dialog {
  color:var(--cream);
  padding:28px;
  background:radial-gradient(ellipse at 0 0,#29472cd9,transparent 45%),linear-gradient(135deg,#0a261c,#061a14 55%,#183323);
  border:1px solid #d8c486;
  border-radius:20px;
  box-shadow:0 0 0 5px #d8c4860d,0 20px 90px #000c;
  width:min(760px,calc(100% - 28px));
  max-height:90dvh;
  overflow:auto
}

dialog[open] {
  animation:dialog-in .3s ease-out
}

dialog::backdrop {
  background:#010905c9;
  backdrop-filter:blur(7px)
}

.close-dialog {
  position:absolute;
  top:14px;
  right:14px;
  width:31px;
  height:31px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#071b14;
  font-size:24px;
  line-height:1;
  display:grid;
  place-items:center
}

.dialog-heading {
  text-align:center;
  margin-bottom:20px;
  padding:0 14px
}

.dialog-heading .eyebrow {
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:8px
}

.dialog-heading h2 {
  font-size:62px
}

.dialog-heading>p:last-child {
  font-size:12px;
  margin-top:11px
}

.map-frame {
  border:1px solid #cdb87f;
  border-radius:11px;
  overflow:hidden;
  height:300px;
  background:#142a20;
  box-shadow:0 0 15px #cab3751a
}

.map-frame iframe {
  border:0;
  width:100%;
  height:100%;
  display:block
}

.travel-grid {
  display:grid;
  grid-template-columns:.8fr 1.15fr .9fr 1.25fr;
  gap:7px;
  margin-top:15px
}

.travel-grid article {
  border:1px solid #c6b98155;
  border-radius:8px;
  padding:11px;
  background:#061a13c9
}

.travel-grid article>span {
  float:left;
  margin-right:6px;
  font-size:19px;
  line-height:1;
  color:var(--gold)
}

.travel-grid h3 {
  font:500 17px var(--serif);
  margin-bottom:10px
}

.travel-grid p {
  font-size:9px;
  line-height:1.6
}

.travel-grid small {
  font-size:8px;
  color:var(--muted)
}

.travel-grid .text-button {
  font-size:9px;
  margin-top:7px
}

.travel-note {
  font-size:9px;
  color:var(--muted);
  margin:10px 0
}

.dialog-actions {
  text-align:right;
  margin-top:16px
}

.song-dialog {
  width:min(470px,calc(100% - 28px));
  padding:35px
}

.song-dialog>.eyebrow {
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:20px
}

.song-dialog h2 {
  font-size:42px;
  line-height:1
}

.song-dialog>p:not(.eyebrow) {
  margin:15px 0
}

.song-dialog .field {
  margin:15px 0
}

.song-dialog input {
  font-size:14px;
  min-height:43px
}

.song-dialog label {
  font-size:9px
}

.toast {
  position:fixed;
  z-index:100;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  border:1px solid var(--gold);
  border-radius:30px;
  padding:12px 25px;
  background:#0b281ff5;
  box-shadow:0 8px 35px #0008;
  max-width:90%;
  text-align:center;
  transition:.25s;
  font-size:12px
}

.toast.visible {
  transform:translate(-50%,0);
  opacity:1
}

.skip-link {
  position:fixed;
  top:-60px;
  left:15px;
  z-index:200;
  background:var(--cream);
  color:var(--bg);
  padding:10px
}

.skip-link:focus {
  top:12px
}

.noscript-note {
  padding:20px;
  text-align:center
}

body.modal-open {
  overflow:hidden
}

.js .reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s,transform .65s
}

.js .reveal.is-visible {
  opacity:1;
  transform:none
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--gold)
}

.quick-rsvp .icon {
  width:14px;
  height:14px
}

.address>.icon {
  width:25px;
  height:30px
}

.timeline-icon .icon {
  width:32px;
  height:32px
}

.timeline-icon {
  height:36px;
  line-height:1
}

.alias-row>.icon {
  width:24px;
  height:24px
}

.travel-grid article>.icon {
  float:left;
  width:20px;
  height:20px;
  margin-right:7px
}

@media(min-width:1450px) {
  .page-shell {
    margin:20px auto
  }
  .header {
    border-top:1px solid var(--line)
  }
}

@media(max-width:1000px) {
  .header {
    padding:0 24px;
    gap:22px
  }
  nav {
    gap:13px
  }
  nav a {
    font-size:8px
  }
  .hero-content {
    padding-left:45px
  }
  .hero-quote {
    right:15px;
    font-size:23px
  }
  .venue-copy {
    padding:24px 20px
  }
  .venue h2 {
    font-size:54px
  }
  .venue-date {
    padding:25px 20px
  }
  .date-display strong {
    font-size:85px
  }
  .card-content {
    padding:20px
  }
  .rsvp-content {
    padding:20px
  }
  .rsvp h2 {
    font-size:38px
  }
  .radio-options {
    gap:4px
  }
  .radio-options label {
    font-size:8px
  }
  .gift-card {
    padding:19px
  }
  .gift-card h2 {
    font-size:21px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:78px
  }
  .page-shell {
    margin:0 13px
  }
  .header {
    height:60px;
    padding:0 18px;
    gap:20px
  }
  .monogram {
    font-size:37px;
    margin-right:auto
  }
  .header-rsvp {
    order:2;
    min-height:31px
  }
  .menu-toggle {
    order:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:34px;
    height:38px;
    border:0;
    background:transparent;
    padding:5px
  }
  .menu-toggle span {
    height:1px;
    width:23px;
    background:var(--cream);
    transition:transform .25s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  nav {
    display:none;
    position:absolute;
    top:59px;
    left:0;
    right:0;
    padding:17px 23px 23px;
    background:#071f18fa;
    border-bottom:1px solid var(--gold);
    box-shadow:0 20px 30px #0006
  }
  nav.is-open {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px
  }
  nav a {
    padding:14px 5px;
    font-size:11px;
    letter-spacing:1px;
    border-bottom:1px solid #d4bc7a25
  }
  nav a:after {
    display:none
  }
  .hero {
    min-height:510px
  }
  .hero-content {
    padding:44px 0 24px 28px;
    width:66%
  }
  .hero-content>.eyebrow {
    font-size:8px;
    letter-spacing:4px
  }
  h1 {
    font-size:116px;
    letter-spacing:-5px
  }
  .hero-script {
    font-size:62px;
    margin-left:36px
  }
  .hero-photo {
    inset:140px -100px 0 0;
    width:auto;
    background-size:auto 100%;
    background-position:right top;
    mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 90%,transparent)
  }
  .hero:after {
    background:linear-gradient(90deg,#061a11ee,#061a1199 32%,transparent 86%),linear-gradient(0deg,#061b14,transparent 28%)
  }
  .hero-quote {
    font-size:21px;
    right:13px;
    top:355px
  }
  .hero-intro {
    font-size:11px;
    max-width:215px
  }
  .hero-date {
    font-size:29px;
    letter-spacing:3px;
    margin-top:18px
  }
  .hero .button {
    font-size:8px;
    letter-spacing:1px;
    padding:11px 18px
  }
  .quick-rsvp {
    font-size:9px;
    padding:6px 12px
  }
  .countdown {
    margin:0 10px 10px;
    padding:15px 12px
  }
  .countdown-values span {
    font-size:51px
  }
  .countdown-values small {
    font-size:8px;
    letter-spacing:2px
  }
  .countdown>.eyebrow {
    font-size:7px;
    letter-spacing:3px;
    margin-bottom:8px
  }
  .venue {
    grid-template-columns:1fr 1fr;
    margin:0 9px
  }
  .venue-copy {
    padding:25px 20px
  }
  .venue-photo {
    grid-column:2;
    grid-row:1;
    min-height:260px
  }
  .venue-date {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:20px;
    gap:5px 25px;
    border-top:1px solid #d2bf7940
  }
  .day-label {
    grid-column:1;
    margin:0!important
  }
  .date-display {
    grid-column:1;
    grid-row:2/4;
    padding:0;
    border:0;
    align-self:start
  }
  .date-display strong {
    font-size:77px
  }
  .date-display>span {
    font-size:14px
  }
  .venue-date .time {
    grid-column:2;
    grid-row:1/3;
    margin:0;
    font-size:24px
  }
  .venue-date>p:last-child {
    grid-column:2;
    grid-row:3;
    font-size:10px
  }
  .small-star {
    display:none
  }
  .timeline {
    margin:0 9px 10px;
    padding:18px 9px
  }
  .timeline>.eyebrow {
    font-size:7px;
    letter-spacing:2.5px
  }
  .timeline li>span:last-child {
    font-size:8px
  }
  .timeline time {
    font-size:12px
  }
  .two-cards {
    margin:0 9px 10px;
    gap:10px;
    grid-template-columns:1fr
  }
  .feature-card {
    min-height:215px
  }
  .card-content {
    padding:23px
  }
  .card-content h2 {
    font-size:37px
  }
  .card-content p:not(.eyebrow) {
    font-size:11px;
    max-width:58%
  }
  .feature-card img {
    width:48%;
    object-position:center
  }
  .rsvp {
    grid-template-columns:1fr;
    margin:0 9px 10px
  }
  .rsvp-photo {
    height:290px
  }
  .rsvp-photo img {
    object-position:center
  }
  .rsvp-content {
    padding:25px 22px
  }
  .rsvp h2 {
    font-size:42px
  }
  .rsvp-intro {
    font-size:11px
  }
  .form-grid {
    gap:14px 11px
  }
  label,legend {
    font-size:8px;
    letter-spacing:1px
  }
  input:not([type=radio]),textarea {
    font-size:16px;
    min-height:43px;
    padding:9px 8px
  }
  .radio-options {
    flex-direction:column;
    gap:5px
  }
  .radio-options label {
    font-size:11px;
    min-height:35px
  }
  .field:has(#acompanantes) {
    align-self:start
  }
  .submit-button {
    min-height:43px;
    margin-top:18px;
    font-size:9px
  }
  .form-notice {
    font-size:10px
  }
  .bottom-cards .feature-card {
    min-height:190px
  }
  .message-card .card-content {
    padding:23px
  }
  .message-card .card-content p:not(.eyebrow) {
    font-size:11px
  }
  .gift-card {
    padding:24px
  }
  .gift-card h2 {
    font-size:25px
  }
  .gift-card p:not(.eyebrow) {
    font-size:11px
  }
  .alias-row {
    padding:8px
  }
  .alias-row .button {
    min-height:33px
  }
  .closing {
    min-height:220px
  }
  .closing>div {
    width:48%;
    padding:10px
  }
  .closing-name {
    font-size:66px
  }
  .closing .script {
    font-size:37px
  }
  .closing .eyebrow {
    font-size:7px;
    letter-spacing:2px;
    line-height:2
  }
  .closing img {
    width:78%;
    object-position:43% center
  }
  .closing:after {
    background:linear-gradient(90deg,transparent,#061b1322 30%,#061b13 77%)
  }
  dialog {
    padding:25px 18px
  }
  .dialog-heading {
    padding:10px 6px 0
  }
  .dialog-heading h2 {
    font-size:49px
  }
  .dialog-heading>p:last-child {
    font-size:10px
  }
  .map-frame {
    height:270px
  }
  .travel-grid {
    grid-template-columns:1fr 1fr;
    gap:9px
  }
  .travel-grid article {
    padding:13px
  }
  .travel-grid h3 {
    font-size:21px
  }
  .travel-grid p {
    font-size:11px
  }
  .travel-grid .text-button {
    font-size:11px;
    min-height:30px
  }
  .dialog-actions .button {
    width:100%;
    font-size:8px
  }
  .song-dialog {
    padding:35px 23px
  }
  .song-dialog .button {
    letter-spacing:1px;
    font-size:8px
  }
}

@media(max-width:400px) {
  .page-shell {
    margin:0 8px
  }
  .header {
    padding:0 14px;
    gap:12px
  }
  .hero {
    min-height:506px
  }
  .hero-content {
    padding-left:21px;
    padding-top:43px;
    width:78%
  }
  h1 {
    font-size:105px
  }
  .hero-script {
    font-size:57px
  }
  .hero-quote {
    font-size:18px;
    right:9px;
    top:355px
  }
  .hero-intro {
    font-size:10px
  }
  .hero-date {
    font-size:28px
  }
  .hero .button {
    font-size:7px;
    padding-inline:16px
  }
  .countdown-values span {
    font-size:43px
  }
  .countdown-values small {
    font-size:7px;
    letter-spacing:1px
  }
  .venue-copy {
    padding:22px 15px
  }
  .venue h2 {
    font-size:48px
  }
  .venue-copy .button {
    font-size:8px;
    padding:8px 14px;
    gap:10px
  }
  .address {
    font-size:9px;
    gap:5px
  }
  .venue-date {
    padding:18px 15px;
    gap:5px 15px
  }
  .date-display {
    gap:9px
  }
  .date-display strong {
    font-size:69px
  }
  .venue-date .time {
    font-size:22px
  }
  .rsvp-content {
    padding:24px 17px
  }
  .rsvp h2 {
    font-size:37px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .radio-options {
    flex-direction:row
  }
  .radio-options label {
    padding:9px;
    font-size:11px
  }
  .card-content {
    padding:22px 18px
  }
  .card-content h2 {
    font-size:34px
  }
  .gift-card {
    padding:22px 17px
  }
  .gift-card h2 {
    font-size:22px
  }
  .alias-row {
    gap:9px
  }
  .alias-row strong {
    font-size:10px
  }
  .alias-row .button {
    padding:5px 10px;
    font-size:7px
  }
  .closing-name {
    font-size:55px
  }
  .closing .script {
    font-size:31px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js .reveal {
    opacity:1;
    transform:none
  }
}



/* Refinamientos de la invitación · Mis 15 */
.monogram small { font:500 17px var(--serif); letter-spacing:1px; }
.hero-photo { background:none; mask-image:none; }
.hero-portrait {
  position:absolute; right:0; bottom:0; width:auto; height:100%; max-width:none;
  object-fit:contain; mask-image:linear-gradient(90deg,transparent,#000 22%);
}
.hero-script { font-size:64px; }
.feature-card img {
  top:10px; right:5px; width:51%; height:calc(100% - 20px);
  object-fit:contain; object-position:right center;
  mask-image:linear-gradient(90deg,transparent,#000 24%);
}
.feature-card:after {
  background:linear-gradient(90deg,#061c13 3%,#061c13f5 33%,#061c1366 58%,transparent 78%);
}
.message-card img { width:50%; object-position:right center; }
.rsvp { grid-template-columns:40% 60%; }
.rsvp-content { padding:27px 30px 24px; }
.rsvp-content>.eyebrow { margin-bottom:13px; font-size:8px; letter-spacing:3px; }
.rsvp h2 { font-size:43px; line-height:1.03; }
.rsvp-intro { margin:10px 0 0; font-size:12px; }
.rsvp-deadline {
  font-size:10px; color:var(--muted); margin:7px 0 20px;
  padding-bottom:16px; border-bottom:1px solid #d4bc7a35;
}
.rsvp-deadline strong { color:var(--cream); font-weight:500; }
.rsvp .form-grid { gap:15px 15px; align-items:start; }
.rsvp label,.rsvp legend { font-size:9px; letter-spacing:.8px; }
.rsvp .field label { min-height:26px; margin-bottom:6px; }
.rsvp input:not([type=radio]),.rsvp textarea { font-size:12px; min-height:43px; padding:10px 11px; }
.rsvp .radio-options label { min-height:43px; font-size:10px; padding:7px; margin:0; }
.rsvp legend { margin-bottom:6px; min-height:26px; }
.rsvp .attendance-comment textarea { min-height:66px; }
.rsvp-finish { margin-top:19px; padding-top:17px; border-top:1px solid #d4bc7a35; }
.rsvp .submit-button { min-height:43px; margin:0; font-size:9px; }
.rsvp .form-notice { text-align:center; font-size:9px; margin-top:10px; }
.rsvp-photo:after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,#061c1377,transparent 25%),linear-gradient(90deg,transparent 80%,#061c1366);
  pointer-events:none;
}
.saved-actions { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; }
.saved-actions:has(button[hidden]):not(:has(button:not([hidden]))) { display:none; }
.alias-row strong { text-transform:none; letter-spacing:1px; overflow-wrap:anywhere; }
.dedication-dialog { width:min(550px,calc(100% - 28px)); padding:36px; }
.dedication-dialog>.eyebrow { margin-bottom:20px; font-size:8px; letter-spacing:2px; }
.dedication-dialog h2 { font-size:45px; line-height:1; }
.dedication-intro { margin:15px 0 22px; max-width:390px; font-size:12px; color:var(--muted); }
.dedication-dialog .field { margin:17px 0; }
.dedication-dialog label { font-size:9px; letter-spacing:1px; }
.dedication-dialog input,.dedication-dialog textarea { padding:12px; font-size:14px; min-height:44px; }
.dedication-dialog textarea { min-height:145px; line-height:1.65; }
.dedication-dialog form>.button { width:100%; min-height:43px; }
.dedication-dialog .form-notice { margin-top:12px; }
.map-dialog {
  padding:0; max-height:calc(100dvh - 40px); overflow:hidden;
  width:min(760px,calc(100% - 28px));
}
.map-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.map-dialog .close-dialog { z-index:3; }
.map-dialog .dialog-heading { margin:0; padding:24px 40px 18px; border-bottom:1px solid #d4bc7a30; }
.map-dialog .dialog-heading h2 { font-size:54px; }
.map-dialog .dialog-heading>p:last-child { margin-top:9px; font-size:12px; }
.map-scroll { overflow:auto; overscroll-behavior:contain; padding:18px 24px 10px; scrollbar-width:thin; scrollbar-color:#9b8957 #0b251a; }
.map-frame { height:260px; box-shadow:0 0 22px #d4bc7a22; }
.map-frame iframe { filter:sepia(.22) saturate(.75); }
.map-dialog .travel-grid { margin-top:13px; }
.map-dialog .travel-grid p { font-size:10px; }
.map-dialog .dialog-actions {
  margin:0; padding:14px 24px 18px; border-top:1px solid #d4bc7a40;
  background:linear-gradient(100deg,#0a241a,#142f20); box-shadow:0 -8px 20px #04120b44;
}
.map-dialog .dialog-actions .button { min-height:42px; }
.map-dialog::backdrop { background:#010905a8; backdrop-filter:blur(4px); }
@media(max-width:1000px) and (min-width:761px) {
  .rsvp-content { padding:24px 22px; }
  .rsvp h2 { font-size:37px; }
  .rsvp .radio-options { flex-direction:column; }
  .rsvp .radio-options label { min-height:31px; }
}
@media(max-width:760px) {
  .hero { min-height:585px; }
  .hero-content { width:100%; padding:34px 26px 28px; }
  .hero-content>.eyebrow { font-size:8px; letter-spacing:4px; margin-bottom:12px; }
  .hero h1 { font-size:108px; line-height:.92; letter-spacing:-4px; }
  .hero-script { font-size:43px; margin:8px 0 34px 31px; transform:rotate(-4deg); line-height:1.1; }
  .hero-intro { font-size:11px; line-height:1.8; max-width:195px; }
  .hero-date { margin:22px 0 95px; font-size:30px; letter-spacing:3px; }
  .hero-photo { inset:174px -17px 110px 0; width:auto; background:none; mask-image:none; }
  .hero-portrait {
    width:auto; height:100%; right:0; bottom:0;
    mask-image:linear-gradient(90deg,transparent,#000 24%);
  }
  .hero:after {
    background:linear-gradient(90deg,#061a11d9,#061a1155 42%,transparent 80%),linear-gradient(0deg,#061b14 8%,transparent 40%);
  }
  .hero-quote { top:371px; right:20px; font-size:19px; line-height:1.15; }
  .hero .button { min-height:46px; width:100%; padding:12px 16px; font-size:9px; letter-spacing:1.2px; }
  .quick-rsvp { min-height:34px; margin:12px auto 0; font-size:10px; border-color:#d2bf7940; padding:7px 13px; }
  .feature-card img { width:49%; height:calc(100% - 24px); top:12px; right:2px; object-fit:contain; }
  .message-card img { width:50%; }
  .rsvp { grid-template-columns:1fr; }
  .rsvp-photo { height:250px; }
  .rsvp-photo img { object-fit:cover; object-position:50% 39%; }
  .rsvp-content { padding:27px 22px 25px; }
  .rsvp h2 { font-size:39px; }
  .rsvp .form-grid { grid-template-columns:1fr; gap:17px; }
  .rsvp .field label,.rsvp legend { min-height:0; font-size:10px; }
  .rsvp input:not([type=radio]),.rsvp textarea { min-height:46px; font-size:16px; padding:11px; }
  .rsvp .radio-options { flex-direction:row; gap:8px; }
  .rsvp .radio-options label { min-height:44px; padding:8px; font-size:11px; }
  .rsvp .attendance-comment textarea { min-height:82px; }
  .rsvp .submit-button { min-height:46px; font-size:9px; }
  .rsvp .form-notice { font-size:10px; line-height:1.65; }
  .map-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); border-radius:16px; }
  .map-dialog .dialog-heading { padding:23px 29px 15px; }
  .map-dialog .dialog-heading h2 { font-size:44px; }
  .map-dialog .dialog-heading .eyebrow { font-size:7px; margin-bottom:8px; }
  .map-dialog .dialog-heading>p:last-child { font-size:10px; line-height:1.6; max-width:250px; margin:9px auto 0; }
  .map-scroll { padding:13px 15px 10px; }
  .map-frame { height:clamp(160px,26dvh,220px); border-radius:9px; }
  .map-dialog .travel-grid { gap:8px; }
  .map-dialog .travel-grid article { padding:11px; }
  .map-dialog .travel-grid h3 { font-size:18px; margin-bottom:7px; }
  .map-dialog .travel-grid p { font-size:10px; line-height:1.5; }
  .map-dialog .travel-grid .text-button { font-size:10px; min-height:28px; }
  .map-dialog .travel-note { font-size:8px; line-height:1.6; }
  .map-dialog .dialog-actions { padding:12px 15px max(13px,env(safe-area-inset-bottom)); }
  .map-dialog .dialog-actions .button { width:100%; min-height:44px; font-size:8px; letter-spacing:1px; }
  .dedication-dialog { padding:32px 23px 25px; }
  .dedication-dialog h2 { font-size:36px; }
  .dedication-dialog input,.dedication-dialog textarea { font-size:16px; }
}
@media(max-width:400px) {
  .hero-content { padding-inline:21px; }
  .hero h1 { font-size:100px; }
  .hero-script { font-size:40px; margin-left:27px; }
  .hero-intro { font-size:10px; max-width:182px; }
  .hero-date { font-size:28px; }
  .hero-photo { right:-33px; }
  .hero-quote { right:15px; font-size:17px; }
  .hero .sparkle { font-size:25px; right:-13px; top:6px; }
  .rsvp-content { padding:25px 18px; }
  .rsvp h2 { font-size:35px; }
  .alias-row { flex-wrap:wrap; gap:8px 11px; padding:11px; }
  .alias-row strong { font-size:11px; }
  .alias-row .button { min-height:33px; }
}
@media(max-width:350px) {
  .hero h1 { font-size:91px; }
  .hero-photo { right:-60px; }
  .hero-intro { max-width:165px; }
  .hero .button { font-size:8px; }
  .alias-row .button { width:100%; }
}

@media(max-width:760px) {
  .hero-photo { inset:165px -22px 185px 0; }
  .hero-portrait { mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(0deg,transparent,#000 15%,#000 82%,transparent); mask-composite:intersect; }
  .hero-quote { top:315px; right:18px; font-size:17px; }
}
@media(max-width:350px) { .hero-photo { right:-45px; } .hero-quote { right:12px; font-size:16px; } }
.venue-visual { margin:0; position:relative; min-height:330px; overflow:hidden; }
.venue-visual .venue-photo { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; object-position:50% 43%; filter:saturate(.88) contrast(.98); }
.venue-visual:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#071d1340,transparent 18%,transparent 82%,#071d1340); }
@media(max-width:760px) { .venue-visual { grid-column:2; grid-row:1; min-height:275px; } .venue-visual .venue-photo { object-position:50% 45%; } }
.feature-card img { width:auto; max-width:51%; object-fit:contain; mask-image:linear-gradient(90deg,transparent,#000 25%),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent); mask-composite:intersect; }
.rsvp-photo img { object-position:50% 36%; }
@media(max-width:760px) { .feature-card img { width:auto; max-width:49%; } .rsvp-photo { height:295px; } .rsvp-photo img { object-position:50% 30%; } }