@font-face{font-family:WeddingScript;src:url('images/fonts/great-vibes.woff');font-display:swap}
@font-face{font-family:WeddingSerif;src:url('images/fonts/playfair.woff');font-weight:400;font-display:swap}
@font-face{font-family:WeddingSerif;src:url('images/fonts/playfair-italic.woff');font-weight:400;font-style:italic;font-display:swap}
:root{--navy:#23485c;--gold:#af8b50;--paper:#f9ece3;--surround:#fff2e3;--serif:WeddingSerif,Georgia,serif;--script:WeddingScript,'Palatino Linotype',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--surround)}body{margin:0;background:var(--surround);color:var(--navy);font-family:var(--serif);font-weight:400}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:4px}p,h1,h2,h3,figure,dl,dd{margin:0}img{display:block;max-width:100%}
/* Six equal 9:16 sections, each with its supplied background. */
.invitation{width:min(100%,540px);margin-inline:auto;position:relative;container-type:inline-size;}
.invitation>section{position:relative;width:100%;aspect-ratio:9/16;height:auto;min-height:0;overflow:hidden;text-align:center;background-repeat:no-repeat;background-position:center top;background-size:100% 100%}
.invitation>section>*{position:absolute}
h2{font-family:var(--script);font-size:12cqw;line-height:1.3;font-weight:400;left:0;width:100%}
.heading-ornament{width:41%;height:auto;left:29.5%;pointer-events:none}.floral-divider{width:85%;height:auto;left:7.5%;pointer-events:none}
/* 1 — Invitation */
.home-logo{width:27%;height:20%;object-fit:contain;left:36.5%;top:4.8%}
.family-label{top:24.2%;width:100%;font-size:2.25cqw;letter-spacing:.37cqw;text-transform:uppercase;line-height:1.5}
h1{left:3%;width:94%;top:26.4%;font:400 10.5cqw/1.3 var(--script);white-space:nowrap}
h1 span{font-size:.8em;color:var(--gold)}
.invitation-copy{top:34.8%;width:100%;font-size:3.1cqw;line-height:1.45}
.home-ornament{width:47%;left:26.5%;top:39.5%}
.home-date{top:46%;width:100%;font-size:2.8cqw;letter-spacing:.33cqw;text-transform:uppercase}
.home-venue{top:48.9%;width:100%;font-size:3.2cqw}
.home-country{top:51.8%;width:100%;font-size:2.4cqw;letter-spacing:.5cqw;text-transform:uppercase}
.countdown{top:54.5%;left:22%;width:56%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.countdown>div{aspect-ratio:459/840;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;isolation:isolate}
.countdown span{font-size:4cqw;line-height:1.2;font-variant-numeric:tabular-nums}
.countdown small{font-size:1.3cqw;letter-spacing:.13cqw;text-transform:uppercase;margin-top:1cqw}
.scroll-link{left:30%;bottom:.7%;width:40%;font-size:3.8cqw;line-height:1.2;z-index:1}
.scroll-link span{display:block;font-size:5cqw;line-height:1.3;color:var(--gold)}
/* 2 — Our Story */
#our-story h2{top:15.4%}#our-story>.heading-ornament{top:23.8%}
.story-copy{top:28.2%;height:13%;left:5%;width:90%;display:flex;flex-direction:column;justify-content:center;font-size:2.8cqw;line-height:1.5;color:#6e5c39}
.story-copy p:first-child{font-size:3.9cqw;margin-bottom:1.2cqw}
.story-divider{width:30%;left:35%;top:41.2%}
.story-portrait{left:5%;top:46%;width:90%;aspect-ratio:846/850}
.portrait-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.photo-placeholder,.story-photo{position:absolute;left:12%;top:16%;width:76%;height:68%;object-fit:cover;border-radius:9%;}
.photo-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;background:#d9dce044;color:#74828a}
.photo-placeholder span{font-size:4cqw;font-style:italic}.photo-placeholder small{font:1.9cqw Arial,sans-serif;letter-spacing:.2cqw}
/* 3 — Details */
#details h2{top:6.5%}#details>.heading-ornament{top:16.5%}
.detail-cards{left:2%;top:23.5%;width:96%;display:grid;grid-template-columns:1fr 1fr;gap:1.5%}
.detail-card{position:relative;aspect-ratio:470/770}.detail-card>img{width:100%;height:100%;object-fit:contain}
.date-text,.time-text{position:absolute;top:64%;width:78%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;text-align:center}.date-text{left:55%}.time-text{left:45%}
.detail-card p{text-transform:uppercase;font-size:2.8cqw;letter-spacing:.5cqw;line-height:1.3}
.detail-card strong{font:400 15cqw/1.05 var(--serif);display:block}
.date-text strong{font-size:16cqw}.time-text strong{font-size:12cqw;letter-spacing:-.7cqw}
#details>.floral-divider{top:69%}
/* 4 — Location */
#location h2{top:4%}#location>.heading-ornament{top:13.2%}
.location-copy{left:2%;width:96%;top:23.5%}.location-copy h3{font-weight:400;font-size:6.7cqw;line-height:1.25;letter-spacing:-.3cqw}.location-copy p{font-size:2.8cqw;letter-spacing:.65cqw;text-transform:uppercase;line-height:1.6;margin-top:2cqw}
.venue-map{left:2%;top:37%;width:96%;height:auto}
.map-link{left:20%;top:76%;width:60%;min-height:44px;display:flex;align-items:center;justify-content:center;padding:2cqw 3cqw;border:1px solid #b39765;border-radius:999px;background:transparent;color:var(--navy)}
.map-link>span{font:clamp(9px,2cqw,11px)/1.3 Arial,sans-serif;letter-spacing:.2cqw;text-transform:uppercase;white-space:nowrap}.map-link>span>span{margin-left:1cqw}
/* 5 — Liste de mariage */
#liste-de-mariage h2{top:3%;font-size:11cqw}#liste-de-mariage>.heading-ornament{top:12.5%}
.registry-copy{top:19%;left:3%;width:94%;font-size:4.35cqw;line-height:1.48}
.registry-cards{top:46%;left:5%;width:90%;aspect-ratio:919/840}
.registry-frames{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.registry-card{position:absolute;top:12%;height:74%;width:35%;left:9%;text-align:center}
.whish-card{left:57%}
.registry-card h3{font-weight:400;font-size:3.9cqw;line-height:1.3;white-space:nowrap;margin-bottom:2cqw}
.registry-card dl{font-size:2.15cqw;line-height:1.3}.registry-card dt{font:1.25cqw/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:.18cqw;margin-top:0}.registry-card dd{margin:0;min-width:0;line-height:1.2;white-space:nowrap;overflow-wrap:normal}
.registry-card button{position:absolute;bottom:1.5%;left:0;width:100%;border:1px solid #b39765;border-radius:20px;background:transparent;color:var(--navy);padding:1cqw .4cqw;font:1.15cqw/1.3 Arial,sans-serif;text-transform:uppercase;letter-spacing:.12cqw}
#liste-de-mariage>.floral-divider{top:88%;width:78%;left:11%}
/* 6 — A little request. The bear and snowy scene belong to the single background. */
.kids-label{top:8%;left:0;width:100%;font:3.5cqw/1.6 Arial,sans-serif;letter-spacing:.4cqw;text-transform:uppercase;color:var(--gold)}
#kids-at-home h2{top:20%;font-size:12.5cqw}#kids-at-home>.heading-ornament{top:33.5%}
.kids-copy{top:40%;left:3%;width:94%;font-size:6cqw;line-height:1.4}
/* Only configuration notices live outside the six-panel artwork. */
dialog{max-width:min(90vw,420px);padding:28px;border:1px solid var(--gold);background:var(--paper);color:var(--navy);font:16px/1.6 var(--serif)}dialog::backdrop{background:#17354770}dialog h2{position:static;width:auto;font:32px var(--script);margin-bottom:16px}dialog p{white-space:pre-line}dialog button{margin-top:20px;border:1px solid var(--gold);border-radius:20px;background:transparent;color:var(--navy);padding:8px 24px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Backgrounds follow the six sections in invitation order. */
#home{background-image:url('images/backgrounds/section1bg.jpg')}
#our-story{background-image:url('images/backgrounds/section2bg.jpg')}
#details{background-image:url('images/backgrounds/section3bg.jpg')}
#location{background-image:url('images/backgrounds/section4bg.jpg')}
#liste-de-mariage{background-image:url('images/backgrounds/section5bg.jpg')}
#kids-at-home{background-image:url('images/backgrounds/section6bg.jpg')}

/* Minimal text and gold arrows, centered at the section's upper/lower edges. */
.section-navigation {
  inset: 0; z-index: 5;
  pointer-events: none;
}
.section-navigation>span { display: none; }
.section-step {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  min-width: 80px; min-height: 44px; padding: 2px 10px;
  bottom: .6%; color: var(--navy); background: transparent;
  border: 0; border-radius: 0; pointer-events: auto;
}
.section-step:first-child:not(:last-child) {
  top: .5%; bottom: auto; flex-direction: column;
}
.section-step>span { font-size: clamp(19px,5cqw,27px); line-height: 1.1; color: var(--gold); }
.section-step>small { font: clamp(11px,3cqw,16px)/1.2 var(--serif); letter-spacing: .1cqw; }
.section-step:hover>small { color: var(--gold); }
/* Leave room for the centered upper control above these two low headings. */
#location h2, #liste-de-mariage h2 { top: 8%; }
#location>.heading-ornament, #liste-de-mariage>.heading-ornament { top: 17%; }
.registry-copy { top: 21.5%; font-size: 4.2cqw; line-height: 1.42; }

/* Reference scroll-down treatment: gold divider, navy serif, long gold arrow. */
.section-step.section-down {
  width: 42cqw; padding: 0; gap: .6cqw;
  flex-direction: column; background: none;
}
.section-down .scroll-ornament {
  width: 28cqw; height: 3.92cqw; flex: none;
  stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.section-down>small {
  font: 400 5cqw/1.15 var(--serif);
  color: var(--navy); letter-spacing: -.12cqw; white-space: nowrap;
}
.section-down .scroll-arrow {
  width: 4.4cqw; height: 11cqw; margin-top: .5cqw; flex: none;
  stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Keep the larger bottom control clear of the photo and registry artwork. */
.story-portrait { top: 47%; width: 77%; left: 11.5%; }
.registry-cards { top: 43%; width: 80%; left: 10%; }
.registry-card h3 { font-size: 3.4cqw; }
#liste-de-mariage>.floral-divider { top: 82.5%; width: 34%; left: 33%; }




/* Center account information within each frame's open interior. */
.registry-card dl {
  position: absolute;
  top: 32%;
  bottom: calc(9% + 7cqw);
  left: 0;
  width: 100%;
  transform: none;
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  row-gap: .25cqw;
  align-items: center;
  text-align: center;
}
.whish-card dl { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.registry-card dt:first-child { margin-top: 0; }
.registry-card button {
  bottom: 9%;
  left: 5%;
  width: 90%;
}



/* A single portrait panel fits the screen; inactive panels never occupy space. */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { height: 100dvh; min-height: 100svh; display: grid; place-items: center; }
.invitation {
  width: min(100%, 540px, 56.25svh);
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.invitation>section[hidden], .invitation>section:not(.is-active):not(.is-leaving) { display: none !important; }
.invitation>section.is-active { display: block; }

/* Warm cream is clipped to the inside of the gold frame, below its artwork. */
.countdown>div::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff1df;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 840'%3E%3Cpath fill='white' d='M244 99C338 99 424 166 424 270V625Q424 703 354 713H127Q66 703 66 640V263Q72 167 161 118Q200 99 244 99Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 840'%3E%3Cpath fill='white' d='M244 99C338 99 424 166 424 270V625Q424 703 354 713H127Q66 703 66 640V263Q72 167 161 118Q200 99 244 99Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.countdown>div::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('images/elements/gift-frames.png') left top / 200.22% 100% no-repeat;
  pointer-events: none;
}
.countdown>div>span, .countdown>div>small { position: relative; z-index: 2; }


/* Directional slide-and-fade, clipped inside the portrait invitation. */
.invitation { background-color: var(--paper); --enter-from: 100%; --exit-to: -22%; }
.invitation[data-direction="backward"] { --enter-from: -100%; --exit-to: 22%; }
.invitation>section { position: absolute; inset: 0; }
.invitation>section.is-active { z-index: 2; }
.invitation>section.is-entering {
  animation: section-enter .75s cubic-bezier(.4,0,.2,1) both;
}
.invitation>section.is-leaving {
  display: block;
  z-index: 1;
  pointer-events: none;
  animation: section-leave .75s cubic-bezier(.4,0,.2,1) both;
}
@keyframes section-enter {
  from { transform: translateY(var(--enter-from)); opacity: .15; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes section-leave {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(var(--exit-to)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .invitation>section { animation: none !important; }
}


/* Align the separate calendar and editable date as one group inside the border. */
.date-text { top: 53.5%; left: 56.1%; }
.date-text .date-icon { width: 42%; height: auto; object-fit: contain; flex-shrink: 0; }

/* Compensate for the trailing letter spacing so date labels center optically. */
.date-text>p { text-indent: .5cqw; }


/* Fit the complete envelope artwork inside the portrait frame without cropping. */
.envelope-intro {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(100%, 540px, 56.25svh); aspect-ratio: 9 / 16;
  z-index: 100; overflow: hidden; background: var(--surround);
  container-type: inline-size;
}
.envelope-intro[hidden] { display: none !important; }
.envelope-open {
  position: relative; display: block; width: 100%; height: 100%;
  aspect-ratio: 9 / 16; padding: 0; border: 0;
  background: transparent; color: var(--navy); cursor: pointer;
  perspective: 1400px; -webkit-tap-highlight-color: transparent;
  --envelope-image-size:contain;
  --envelope-image-position:center;
}
.envelope-open:focus-visible { outline: none; }
.envelope-open:focus-visible::after {
  content: ''; position: absolute; inset: 0;
  outline: 2px solid var(--navy); outline-offset: -3px;
}
.envelope-photo, .envelope-piece, .envelope-seal {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: url('images/9-16%20Envelope.png') var(--envelope-image-position) / var(--envelope-image-size) no-repeat;
  pointer-events: none;
}
.envelope-photo { z-index: 1; left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: contain; object-position: center; background: none; }
.envelope-piece { background: none; backface-visibility: hidden; }
.envelope-piece::before {
  content: ''; position: absolute; inset: 0;
  background: url('images/9-16%20Envelope.png') var(--envelope-image-position) / var(--envelope-image-size) no-repeat;
  clip-path: var(--flap-shape);
  -webkit-mask-image: radial-gradient(ellipse 20.3% 11.2% at 49.8% 49%, transparent 96%, #000 100%);
  mask-image: radial-gradient(ellipse 20.3% 11.2% at 49.8% 49%, transparent 96%, #000 100%);
}
.envelope-top { z-index: 6; --flap-shape: polygon(.5% .3%,99.5% .3%,49.8% 49%); transform-origin: 49.8% .3%; }
.envelope-left { z-index: 5; --flap-shape: polygon(.5% .3%,49.8% 49%,.5% 99.6%); transform-origin: .5% 50%; }
.envelope-right { z-index: 5; --flap-shape: polygon(99.5% .3%,99.5% 99.6%,49.8% 49%); transform-origin: 99.5% 50%; }
.envelope-bottom { z-index: 4; --flap-shape: polygon(.5% 99.6%,49.8% 49%,99.5% 99.6%); transform-origin: 50% 99.6%; }
.envelope-seal {
  z-index: 7; clip-path: ellipse(20.5% 11.4% at 49.8% 49%);
  transform-origin: 49.8% .3%; backface-visibility: hidden;
}
.envelope-seal::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 23.5% 13.5% at 49.8% 49%,#e5f7ffcc 10%,#91cfff99 55%,transparent 100%);
}
.envelope-sparkles { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.envelope-sparkles {
  z-index: 8;
  background:
    radial-gradient(circle at 33% 28%,#eaf8ff 0 .2cqw,transparent .55cqw),
    radial-gradient(circle at 74% 35%,#eaf8ff 0 .22cqw,transparent .6cqw),
    radial-gradient(circle at 51% 20%,#eaf8ff 0 .2cqw,transparent .5cqw),
    radial-gradient(circle at 29% 68%,#eaf8ff 0 .25cqw,transparent .65cqw),
    radial-gradient(circle at 66% 72%,#eaf8ff 0 .2cqw,transparent .6cqw),
    radial-gradient(circle at 50% 58%,#f2fbff 0 .25cqw,transparent .7cqw),
    radial-gradient(circle at 58% 39%,#eaf8ff 0 .15cqw,transparent .5cqw),
    radial-gradient(circle at 42% 75%,#eaf8ff 0 .15cqw,transparent .5cqw);
}
#envelope-hint {
  position: absolute; bottom: 4%; left: 0; width: 100%; text-align: center;
  font: clamp(10px,2.4cqw,13px)/1.5 var(--serif);
  color: #8e7047; letter-spacing: .4cqw; text-transform: uppercase;
}
body.envelope-pending .invitation { opacity: 0; pointer-events: none; }
body.envelope-opening .invitation { opacity: 1; transition: opacity .45s ease 2.5s; }
.envelope-intro.is-opening { pointer-events: none; background: transparent; animation: envelope-dismiss .25s ease 6.4s both; }
.is-opening .envelope-photo { animation: envelope-dismiss .35s ease 2.65s both; }
.is-opening .envelope-seal::after { animation: seal-glimmer .5s ease .25s both; }
.is-opening .envelope-top, .is-opening .envelope-seal { animation: flap-top 3s cubic-bezier(.4,0,.2,1) 2.8s both; }
.is-opening .envelope-left { animation: flap-left 3.2s cubic-bezier(.4,0,.2,1) 3.1s both; }
.is-opening .envelope-right { animation: flap-right 3.2s cubic-bezier(.4,0,.2,1) 3.1s both; }
.is-opening .envelope-bottom { animation: flap-bottom 3.2s cubic-bezier(.4,0,.2,1) 3.2s both; }
.is-opening .envelope-sparkles { animation: envelope-sparkle 3.65s ease 1.6s both; }
.is-opening #envelope-hint { opacity: 0; transition: opacity .3s; }
@keyframes seal-glimmer { from { opacity: 0; } to { opacity: .95; } }
/* Unfold around each paper edge first; finish clearing the portrait frame. */
@keyframes flap-top {
  0% { transform: translateY(0) rotateX(0); }
  70% { transform: translateY(0) rotateX(110deg); }
  100% { transform: translateY(-65%) rotateX(165deg); }
}
@keyframes flap-left {
  0% { transform: translateX(0) rotateY(0); }
  70% { transform: translateX(0) rotateY(-110deg); }
  100% { transform: translateX(-105%) rotateY(-165deg); }
}
@keyframes flap-right {
  0% { transform: translateX(0) rotateY(0); }
  70% { transform: translateX(0) rotateY(110deg); }
  100% { transform: translateX(105%) rotateY(165deg); }
}
@keyframes flap-bottom {
  0% { transform: translateY(0) rotateX(0); }
  70% { transform: translateY(0) rotateX(-110deg); }
  100% { transform: translateY(105%) rotateX(-165deg); }
}

@keyframes envelope-sparkle { 0%,100% { opacity: 0; transform: translateY(1%); } 24% { opacity: .7; } 50% { opacity: .3; } 76% { opacity: .9; transform: translateY(-2%); } }
@keyframes envelope-dismiss { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .envelope-intro, .envelope-intro *, .envelope-intro *::after, body.envelope-opening .invitation { animation: none !important; transition: none !important; }
}

/* Cut lights inherit each flap's motion; only the artwork is clipped,
   allowing the soft beam to extend into the opening beside the paper. */
.envelope-cut-light {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #e5f8ff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 2px #e4f7ff) drop-shadow(0 0 5px #9bd8ff) drop-shadow(0 0 10px #7ec8ff);
}
.envelope-cut-light path { vector-effect: non-scaling-stroke; stroke-width: 1.4px; stroke-linejoin: round; }
.is-opening .envelope-cut-light { animation: cut-edge-beam 6.4s linear both; }
/* Peak at 2.8 seconds, exactly when flap movement begins. */
@keyframes cut-edge-beam {
  0% {
    opacity: .1;
    filter: drop-shadow(0 0 1px #e4f7ff) drop-shadow(0 0 2px #9bd8ff) drop-shadow(0 0 4px #7ec8ff);
  }
  20% {
    opacity: .4;
    filter: drop-shadow(0 0 2px #e4f7ff) drop-shadow(0 0 5px #9bd8ff) drop-shadow(0 0 10px #7ec8ff);
  }
  43.75% {
    opacity: 1;
    filter: drop-shadow(0 0 3px #e4f7ff) drop-shadow(0 0 10px #9bd8ff) drop-shadow(0 0 22px #7ec8ff);
  }
  60% {
    opacity: .55;
    filter: drop-shadow(0 0 2px #e4f7ff) drop-shadow(0 0 7px #9bd8ff) drop-shadow(0 0 14px #7ec8ff);
  }
  80% {
    opacity: .18;
    filter: drop-shadow(0 0 1px #e4f7ff) drop-shadow(0 0 3px #9bd8ff) drop-shadow(0 0 6px #7ec8ff);
  }
  100% {
    opacity: 0;
    filter: drop-shadow(0 0 0 #e4f7ff) drop-shadow(0 0 0 #9bd8ff) drop-shadow(0 0 0 #7ec8ff);
  }
}
@media (prefers-reduced-motion: reduce) {
  .envelope-cut-light { animation: none !important; }
}










/* Music remains optional and can be paused during the opening or invitation. */
.music-toggle {
  position: fixed; z-index: 110;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  min-width: 64px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--gold); border-radius: 24px;
  background: var(--surround); color: var(--navy);
  font: 10px/1.4 Arial,sans-serif; letter-spacing: .5px;
}
.music-toggle[hidden] { display: none !important; }



/* Preserve the title placement after removing the two registry icons. */
.registry-card h3 { position: absolute; top: 17%; left: 0; width: 100%; margin: 0; }
.whish-card h3 { transform: translateX(-1cqw); }


#details .attendance-note {
  top: 85%; left: 7%; width: 86%;
  font-size: 3cqw; line-height: 1.5; color: var(--navy);
}

/* Two independent URLs, with an always-available language switch. */
@font-face { font-family: WeddingArabic; src: url('images/fonts/amiri.woff'); font-weight: 400; font-style: normal; font-display: swap; }
html[lang="ar"] { --serif: WeddingArabic,'Traditional Arabic',Tahoma,serif; --script: WeddingArabic,'Traditional Arabic',serif; }
html[lang="ar"] .invitation { direction: rtl; }
html[lang="ar"] h1 { font-family: var(--serif); font-size: 11cqw; line-height: 1.3; }
html[lang="ar"] h2 { font-family: var(--serif); font-size: 11cqw; }
html[lang="ar"] .family-label { font-size: 2.7cqw; letter-spacing: 0; line-height: 1.3; }
html[lang="ar"] .invitation-copy { top: 34.4%; font-size: 3.2cqw; line-height: 1.3; }
html[lang="ar"] .home-date { font-size: 3.2cqw; letter-spacing: 0; }
html[lang="ar"] .home-venue { font-size: 3.3cqw; }
html[lang="ar"] .home-country { font-size: 2.9cqw; letter-spacing: 0; }
html[lang="ar"] .countdown { direction: rtl; }
html[lang="ar"] .countdown span { direction: ltr; }
html[lang="ar"] .countdown small { font-size: 1.8cqw; letter-spacing: 0; margin-top: .5cqw; }
html[lang="ar"] .story-copy { top: 28.2%; height: 16.8%; font-size: 3cqw; line-height: 1.5; }
html[lang="ar"] .story-copy p:first-child { font-size: 4cqw; }
html[lang="ar"] .story-copy em { font-style: normal; }
html[lang="ar"] .photo-placeholder small { font-family: Tahoma,Arial,sans-serif; letter-spacing: 0; }
/* Preserve frame placement; make their editable contents right-to-left. */
html[lang="ar"] .detail-cards, html[lang="ar"] .registry-cards { direction: ltr; }
html[lang="ar"] .detail-card, html[lang="ar"] .registry-card { direction: rtl; }
html[lang="ar"] .detail-card p { font-size: 3.7cqw; letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] .date-text>p { text-indent: 0; }
html[lang="ar"] .detail-card strong { direction: ltr; }
html[lang="ar"] #details .attendance-note { font-size: 4.2cqw; }
html[lang="ar"] .location-copy h3 { font-size: 6cqw; letter-spacing: 0; }
html[lang="ar"] .location-copy p { font-size: 3.3cqw; letter-spacing: 0; line-height: 1.5; }
html[lang="ar"] .map-link>span { font: 2.7cqw/1.5 var(--serif); letter-spacing: 0; }
html[lang="ar"] .registry-copy { font-size: 3.8cqw; line-height: 1.5; }
html[lang="ar"] .registry-card h3 { font-size: 4.3cqw; }
html[lang="ar"] .registry-card dl { font-size: 2.4cqw; }
html[lang="ar"] .registry-card dt { font-family: Tahoma,Arial,sans-serif; font-size: 1.65cqw; letter-spacing: 0; }
html[lang="ar"] .registry-card dd[dir="ltr"] { font: 2.15cqw/1.2 Arial,sans-serif; unicode-bidi: isolate; }
html[lang="ar"] .registry-card button { font-family: Tahoma,Arial,sans-serif; font-size: 1.55cqw; letter-spacing: 0; }
html[lang="ar"] .kids-label { font-family: Tahoma,Arial,sans-serif; font-size: 3.6cqw; letter-spacing: 0; }
html[lang="ar"] #kids-at-home h2 { font-size: 10.5cqw; }
html[lang="ar"] .kids-copy { font-size: 5.7cqw; }
html[lang="ar"] .section-step>small { font-size: clamp(12px,3.2cqw,17px); letter-spacing: 0; }
html[lang="ar"] .section-down>small { font-size: 4.5cqw; }
html[lang="ar"] #envelope-hint { font-family: var(--serif); font-size: 3.3cqw; letter-spacing: 0; }
html[lang="ar"] .music-toggle { font-family: Tahoma,Arial,sans-serif; }
html[lang="ar"] dialog p { text-align: start; unicode-bidi: plaintext; }
html[lang="ar"] .time-text strong { letter-spacing: 0; }






/* Prevent automatic mobile text inflation; browser zoom remains available. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#liste-de-mariage .registry-card dd[data-bank="iban"] {
  font: 1.85cqw/1.2 Arial,sans-serif;
  letter-spacing: 0; direction: ltr; unicode-bidi: isolate;
}

/* Space the longer Arabic story above its ornament and photograph. */
html[lang="ar"] .story-divider { top: 45%; }
html[lang="ar"] .story-portrait { top: 50.8%; width: 73%; left: 13.5%; }


/* Keep both faces below the frame's upper snowflake ornament. */
.story-photo { top: 20%; height: 62%; object-position: center; }