/* =========================================================
   Engagement invitation — folk-art doors onto the sea
   Palette sampled from the two painted portraits:
   maroon stripes, olive frames, butter-cream paper,
   soft pinks, dusty blues, cream white, gold stars.
   ========================================================= */
:root {
  --maroon: #7b2f2f;
  --maroon-deep: #5c2222;
  --maroon-soft: #a34a4a;
  --rose: #c97b78;
  --pink: #e6b1ad;
  --pink-pale: #f0d3cd;
  --olive: #8f9a4e;
  --olive-deep: #6b7638;
  --olive-pale: #b9c07a;
  --olive-wash: #ecead0;
  --leaf: #5f7a3e;
  --cream: #f4ead0;
  --cream-deep: #eadcaf;
  --butter: #f1e2b4;
  --paper: #f8f1de;
  --white: #fbf7ee;
  --sky: #d6e6f0;
  --blue: #a9c3d8;
  --blue-deep: #7f9fbd;
  --ink: #4a2a24;
  --ink-soft: #7a5048;
  --dot: #4e231f;
  --gold: #d8b04a;

  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-script: "Great Vibes", "Pinyon Script", "Snell Roundhand", "Brush Script MT", cursive;
  --font-ar: "Amiri", "Noto Naskh Arabic", "Scheherazade New", serif;
  --font-ar-display: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .12 .5 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* stripe edges are gradients, not hard stops — brush strokes, not tape */
  --stripes: repeating-linear-gradient(90deg,
    #7b2f2f 0 15px, #9a4343 20px 25px, #b8605c 30px 38px,
    #7b2f2f 43px 45px, #c98a86 49px 53px, #8e3a3a 58px 72px);
  --wash: radial-gradient(60% 40% at 15% 20%, rgba(233, 201, 166, .35), transparent 70%),
          radial-gradient(50% 45% at 85% 75%, rgba(185, 192, 122, .28), transparent 70%),
          radial-gradient(45% 35% at 60% 10%, rgba(230, 177, 173, .22), transparent 70%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: var(--grain) 0 0 / 300px 300px;
  opacity: .28;
}
img { max-width: 100%; height: auto; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { display: block; }
/* ---------- the music button ---------- */
.sound {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  inset-inline-end: max(12px, env(safe-area-inset-right));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1.5px solid var(--olive-deep);
  border-radius: 999px;
  background: var(--cream);
  color: var(--maroon-deep);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(74, 42, 36, .6);
  transition: transform .2s var(--ease), background .2s;
}
.sound:hover, .sound:focus-visible { background: var(--white); transform: translateY(-1px); }
.sound:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.sound .slash { display: none; }
.sound.off .wave { display: none; }
.sound.off .slash { display: block; }
html:not(.js) .sound { display: none; }

/* =========================================================
   THE GATE
   ========================================================= */
.gate {
  position: relative;
  height: 100vh;
  height: 100lvh;   /* the tallest the phone gets: the painting still fills the screen once the address bar slides away */
  min-height: 560px;
  overflow: hidden;
  background: var(--maroon-deep);
  isolation: isolate;
}

/* --- the painting behind the doors --- */
/* the doors arrive after the painting; hold it back so it is not glimpsed first */
html.js .gate:not(.doors-in) .scene { visibility: hidden; }
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #b9502f;
  transform-origin: 50% 42%;
  will-change: transform;
}
.scene-bg, .scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the painting is always shown whole; its own colours, blurred, fill the rest */
.scene-img { object-fit: contain; object-position: 50% 50%; }   /* whole, full height, never cropped */
/* phones get portrait-sofa-phone.jpg: the same painting with its olive border
   extended above and below, so it fills the screen and only border is trimmed */
@media (max-aspect-ratio: 1/1) {
  .scene-img { object-fit: cover; }
  .scene-bg { display: none; }
}
.scene-bg { object-fit: cover; object-position: 50% 40%; transform: scale(1.5); filter: blur(22px) brightness(.8) saturate(1.1); }
.shade {
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, rgba(46, 18, 14, .35), rgba(46, 18, 14, .75));
  pointer-events: none;
}
/* the copy sits in front of the painting; it does not scale with it */
.hero-ui { position: absolute; inset: 0; pointer-events: none; }
.hero-ui a, .hero-ui button { pointer-events: auto; }
.hero-ui::before, .hero-ui::after {   /* soft ink washes so the lettering reads on the painting */
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
}
.hero-ui::before { top: 0; height: 46%; background: linear-gradient(180deg, rgba(60, 22, 14, .55), rgba(60, 22, 14, .25) 60%, transparent); }
.hero-ui::after { bottom: 0; height: 34%; background: linear-gradient(0deg, rgba(60, 22, 14, .6), transparent); }

/* --- the invitation: one flat colour, a line, the names, the date, the counter --- */
.invite { background: var(--paper); padding-top: clamp(56px, 10vw, 110px); padding-bottom: clamp(56px, 10vw, 110px); }
.join {
  margin: 0 0 .4em;
  font-size: clamp(15px, 2.2vw, 20px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--maroon);
}
[dir="rtl"] .join { letter-spacing: 0; text-transform: none; font-size: clamp(19px, 2.6vw, 24px); }
.names-block { margin: 0 auto .2em; }
.names { display: block; width: min(100%, 640px); height: auto; margin: 0 auto; overflow: visible; }
.name {
  font-family: "Alex Brush", "Allison", var(--font-script);
  font-size: 118px;
  fill: var(--maroon);
  stroke: var(--maroon-deep);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: url(#wc-ink);
}
.name.amp { font-size: 84px; fill: var(--olive-deep); stroke: var(--olive-deep); }
[dir="rtl"] .name { font-family: var(--font-ar-display); font-size: 78px; }
[dir="rtl"] .name.amp { font-size: 60px; }
.when {
  margin: 1.2em 0 0;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.when .sep { margin: 0 .5em; color: var(--olive-deep); }
[dir="rtl"] .when { letter-spacing: 0; }
.cd-wrap { width: min(100%, 560px); margin: 0 auto; }
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.5vw, 12px);
}
.countdown div {
  background: var(--cream);
  border: 1.5px solid var(--olive);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--olive-pale), 0 12px 24px -14px rgba(74, 42, 36, .8);
  padding: .45em .2em .4em;
  border-radius: 4px;
}
.countdown div { text-shadow: none; }
.countdown b {
  display: block;
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: var(--maroon);
  font-variant-numeric: tabular-nums;
}
.countdown small {
  display: block;
  margin-top: .35em;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-deep);
}
[dir="rtl"] .countdown small { letter-spacing: 0; text-transform: none; font-size: 13px; }
.today { margin: 0; font-size: clamp(20px, 3vw, 28px); font-style: italic; color: var(--maroon); }
.more {
  margin: .8em 0 0;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
[dir="rtl"] .more { letter-spacing: 0; text-transform: none; font-size: 14px; }
.more svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* wide screens: the whole painting stands in the middle, its own colours
   blurred behind it; the names take the left, the countdown the right */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
  .scene-img { object-position: 50% 50%; }
  .scene { transform-origin: 50% 45%; }
  .hero-ui::before { height: 100%; background: linear-gradient(90deg, rgba(60, 22, 14, .7), rgba(60, 22, 14, .35) 26%, transparent 40%, transparent 60%, rgba(60, 22, 14, .35) 74%, rgba(60, 22, 14, .7)); }
  .hero-ui::after { display: none; }
  /* the painting stands in the middle at (100svh × 0.79 × 1.06) wide; the columns take what is left */
  .hero-copy, .hero-countdown { --side: calc((100vw - 100lvh * .7886 * 1.06) / 2); }
  .hero-copy {
    left: 1.5vw;
    top: 50%;
    width: calc(var(--side) - 3vw);
    transform: translateY(-50%);
  }
  .hero-countdown {
    left: auto;
    right: 1.5vw;
    bottom: auto;
    top: 50%;
    width: calc(var(--side) - 3vw);
    transform: translateY(-50%);
  }
  [dir="rtl"] .hero-copy { left: auto; right: 1.5vw; }
  [dir="rtl"] .hero-countdown { right: auto; left: 1.5vw; }
}

/* --- the painted doorway ---
   The gate is the painting of the door. JavaScript lays the painting over the
   viewport (cover on phones, a little larger than the height on wide screens)
   and writes the doorway's rectangle into these variables; the wall is masked
   with a hole exactly there, and the two leaves, cut from the same painting,
   hang in that hole. Scrolling swings them open and then scales wall and
   leaves about the doorway's centre until it fills the screen. */
.portal-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: var(--cx, 50%) var(--cy, 50%);
  will-change: transform;
  -webkit-mask: linear-gradient(#000 0 0) var(--dx, 20%) var(--dy, 30%) / var(--dw, 60%) var(--dh, 57%) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) var(--dx, 20%) var(--dy, 30%) / var(--dw, 60%) var(--dh, 57%) no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.wall {
  position: absolute;
  left: var(--pl, 0); top: var(--pt, 0);
  width: var(--pw, 100%); height: var(--ph, 100%);
  max-width: none;
  display: block;
}
.wall-bg {                 /* fills the sides on wide screens with the painting's own colours */
  position: absolute;
  inset: -4%;
  width: 108%; height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40%;
  filter: blur(18px) brightness(.92);
  display: none;
}
.portal-wall.letterboxed .wall-bg { display: block; }
.portal-leaves {
  position: absolute;
  left: var(--dx, 20%); top: var(--dy, 30%);
  width: var(--dw, 60%); height: var(--dh, 57%);
  transform-origin: 50% 50%;
  perspective: var(--persp, 1200px);
  perspective-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.door {
  position: absolute;
  top: 0; bottom: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 0 30px rgba(30, 10, 8, .45);
}
.door.left  { left: 0;  width: calc(var(--seam, .497) * 100%); transform-origin: 0% 50%;   background-image: url("../assets/door-left.jpg"); }
.door.right { right: 0; width: calc((1 - var(--seam, .497)) * 100%); transform-origin: 100% 50%; background-image: url("../assets/door-right.jpg"); }
.door-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 3%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(255, 230, 200, .1));
}
.door.left  .door-edge { right: 0; }
.door.right .door-edge { left: 0; transform: scaleX(-1); }
.leak {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 50%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, rgba(255, 240, 200, .9), rgba(255, 240, 200, 0) 70%);
  opacity: 0;
  filter: blur(6px);
}

/* --- scroll hint --- */
.hint {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 100lvh - 100svh);   /* clear of the address bar while it is still showing */
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .55em 1.2em .55em 1.4em;
  border: 1.5px solid var(--olive-deep);
  border-radius: 999px;
  background: var(--cream);
  color: var(--maroon-deep);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(30, 10, 8, .9);
  white-space: nowrap;
}
[dir="rtl"] .hint { letter-spacing: 0; text-transform: none; font-size: 16px; }
.hint svg { animation: nudge 1.6s ease-in-out infinite; }
.hint:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* no JavaScript, or GSAP failed to load: the doorway is simply gone through */
html:not(.js) .portal-wall, html:not(.js) .portal-leaves, html:not(.js) .shade, html:not(.js) .hint,
html.no-gsap .portal-wall, html.no-gsap .portal-leaves, html.no-gsap .shade, html.no-gsap .hint { display: none; }

/* =========================================================
   SECTIONS
   ========================================================= */
section:not(.gate) {
  position: relative;
  padding: clamp(48px, 9vw, 96px) clamp(18px, 5vw, 40px);
  text-align: center;
}
section:not(.gate) > * { position: relative; }
.paper { background: var(--wash), var(--paper); }
.olive {
  background:
    radial-gradient(circle, rgba(107, 118, 56, .16) 1.2px, transparent 1.6px) 0 0 / 26px 26px,
    var(--wash),
    var(--olive-wash);
}
.stripes { background: var(--stripes); }
.stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 20% 30%, rgba(255, 230, 200, .18), transparent 70%),
    radial-gradient(60% 50% at 80% 70%, rgba(60, 10, 10, .22), transparent 70%),
    var(--grain) 0 0 / 260px 260px;
  opacity: .7;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 .6em;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--olive-deep);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 16px; }
.lead {
  max-width: 34ch;
  margin: 0 auto .5em;
  font-size: clamp(18px, 2.4vw, 22px);
  font-style: italic;
  line-height: 1.45;
}
[dir="rtl"] .lead { font-style: normal; }
section h2 {
  margin: 0 0 .15em;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--maroon);
}
.script, .script-title {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--maroon);
}
.script-title { font-size: clamp(44px, 8vw, 72px); line-height: 1; margin: 0 0 .15em; }
.script-title .amp { color: var(--olive-deep); font-size: .7em; }
[dir="rtl"] .script, [dir="rtl"] .script-title { font-family: var(--font-ar-display); }
[dir="rtl"] .script-title { font-size: clamp(36px, 7vw, 60px); line-height: 1.5; }
.fullnames { margin: .3em 0 0; font-size: clamp(19px, 2.6vw, 24px); letter-spacing: .04em; }
.fullnames .amp { color: var(--olive-deep); }
.fullnames.alt { margin-top: .05em; font-family: var(--font-ar-display); letter-spacing: 0; color: var(--maroon-soft); }
[dir="rtl"] .fullnames { font-family: var(--font-ar-display); letter-spacing: 0; }
[dir="rtl"] .fullnames.alt { font-family: var(--font-serif); letter-spacing: .04em; }
.message { margin: 1em auto 0; max-width: 40ch; color: var(--ink-soft); }

.divider {
  display: block;
  width: min(60%, 260px);
  height: auto;
  margin: 0 auto 1.2em;
  overflow: visible;
}

/* --- stamp cards (the invitation, the story) --- */
.stamp {
  --r: 9px; --s: 26px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 40px);
  background: var(--cream);
  -webkit-mask:
    radial-gradient(circle at 50% 0,    #0000 var(--r), #000 calc(var(--r) + .6px)) 50% 0 / var(--s) 100% repeat-x,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .6px)) 50% 0 / var(--s) 100% repeat-x,
    radial-gradient(circle at 0 50%,    #0000 var(--r), #000 calc(var(--r) + .6px)) 0 50% / 100% var(--s) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) 0 50% / 100% var(--s) repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 50% 0,    #0000 var(--r), #000 calc(var(--r) + .6px)) 50% 0 / var(--s) 100% repeat-x,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .6px)) 50% 0 / var(--s) 100% repeat-x,
    radial-gradient(circle at 0 50%,    #0000 var(--r), #000 calc(var(--r) + .6px)) 0 50% / 100% var(--s) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) 0 50% / 100% var(--s) repeat-y;
  mask-composite: intersect;
}
.stamp { background: var(--wash), var(--cream); }
.stamp .portrait {
  margin: 0 0 clamp(18px, 4vw, 28px);
  padding: 6px;
  border: 3px solid var(--olive);
  outline: 1px solid var(--olive-deep);
  outline-offset: 2px;
  background: var(--white);
}
.stamp .portrait img { width: 100%; }
.invite-text .eyebrow { color: var(--maroon-soft); }
.story-text { max-width: 38ch; margin: 0 auto; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; }

/* --- the date --- */
.date-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 28px);
  margin: .2em 0 0;
}
.date-grid .day, .date-grid .month {
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .3em 0;
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  color: var(--ink);
}
[dir="rtl"] .date-grid .day, [dir="rtl"] .date-grid .month { letter-spacing: 0; text-transform: none; font-size: clamp(18px, 2.6vw, 24px); }
.date-grid .num {
  font-size: clamp(84px, 16vw, 132px);
  font-weight: 500;
  line-height: .9;
  color: var(--maroon);
}
.year { margin: .4em 0 0; font-size: clamp(16px, 2.2vw, 20px); letter-spacing: .3em; color: var(--olive-deep); }
[dir="rtl"] .year { letter-spacing: 0; }
.times {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
  margin: 1.6em auto 0;
  max-width: 640px;
}
.times > div {
  min-width: 150px;
  padding: .8em 1em;
  background: var(--cream);
  border: 1.5px solid var(--olive);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--olive-pale);
}
.times .lbl { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--olive-deep); }
[dir="rtl"] .times .lbl { letter-spacing: 0; text-transform: none; font-size: 15px; }
.times .val { display: block; margin-top: .2em; font-size: clamp(19px, 2.4vw, 23px); color: var(--maroon); font-weight: 500; }

/* --- buttons --- */
.btn {
  display: inline-block;
  margin: .3em .2em 0;
  padding: .75em 1.8em;
  border: 1.5px solid var(--maroon-deep);
  border-radius: 999px;
  background: var(--maroon);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(74, 42, 36, .9);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
[dir="rtl"] .btn { letter-spacing: 0; text-transform: none; font-size: 17px; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); background: var(--maroon-deep); }
.btn:focus-visible { outline: 2px solid var(--olive-deep); outline-offset: 3px; }
.btn.ghost { background: var(--cream); color: var(--maroon-deep); border-color: var(--olive-deep); }
.btn.ghost:hover { background: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; margin-top: 1.6em; }

/* --- the venue --- */
.venue-alt { margin: 0; font-family: var(--font-ar-display); font-size: clamp(22px, 3.4vw, 30px); color: var(--maroon-soft); }
[dir="rtl"] .venue-alt { font-family: var(--font-serif); font-size: clamp(20px, 3vw, 26px); }
.venue address { font-style: normal; margin: .5em 0 .1em; font-size: clamp(18px, 2.4vw, 22px); }
.sea-panel {
  width: min(100%, 720px);
  margin: 1.4em auto 1.2em;
}
.sea-frame {
  position: relative;
  aspect-ratio: 1400 / 1050;
  overflow: hidden;
  border: 3px solid var(--olive);
  outline: 1px solid var(--olive-deep);
  outline-offset: 2px;
  background: var(--white);
  box-shadow: 0 24px 40px -30px rgba(74, 42, 36, .9);
}
.sea-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sea-caption { margin: .8em 0 0; font-style: italic; color: var(--blue-deep); }
[dir="rtl"] .sea-caption { font-style: normal; }
.dinner { margin-top: 1.4em; }

/* --- the details --- */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  width: min(100%, 760px);
  margin: 1.2em auto 0;
  text-align: start;
}
.details-grid > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: .9em 1em;
  background: var(--cream);
  border: 1.5px solid var(--olive);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--olive-pale);
}
.details-grid .ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--butter);
  border: 1px solid var(--olive);
  color: var(--maroon);
}
.details-grid .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.details-grid h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--olive-deep); }
[dir="rtl"] .details-grid h3 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.details-grid p { margin: .1em 0 0; font-size: clamp(16px, 2vw, 18px); }

/* --- RSVP --- */
.rsvp-body { max-width: 40ch; margin: 0 auto; color: var(--ink-soft); }
.rsvp-card {
  width: min(100%, 460px);
  margin: 1.6em auto 0;
  padding: clamp(20px, 4vw, 30px);
  background: var(--cream);
  border: 1.5px solid var(--olive);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--olive-pale), 0 20px 40px -30px rgba(74, 42, 36, .8);
  text-align: start;
}
.field { margin-bottom: 1em; }
.field label { display: block; margin-bottom: .3em; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--olive-deep); }
[dir="rtl"] .field label { letter-spacing: 0; text-transform: none; font-size: 15px; }
.field input {
  width: 100%;
  padding: .6em .8em;
  border: 1.5px solid var(--olive-pale);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}
.field input:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(123, 47, 47, .18); }
.field input[aria-invalid="true"] { border-color: #a33d43; }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.stepper input { text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  border: 1.5px solid var(--olive-deep);
  border-radius: 4px;
  background: var(--butter);
  color: var(--maroon-deep);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.step:disabled { opacity: .4; cursor: default; }
.rsvp .submit { display: block; width: 100%; margin: .4em 0 0; }
.form-note { margin: .8em 0 0; min-height: 1.4em; text-align: center; font-size: 15px; font-style: italic; color: var(--ink-soft); }
[dir="rtl"] .form-note { font-style: normal; }
.form-note.error { color: #a33d43; }
.rsvp-done { text-align: center; }
.done-rose { width: 60px; height: 60px; }
.rsvp-thanks { margin: .2em 0 0; font-size: clamp(19px, 2.4vw, 22px); color: var(--maroon); }

/* --- closing --- */
.closing .verse {
  max-width: 26ch;
  margin: 0 auto;
  font-family: "Amiri Quran", var(--font-ar-display);
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1.7;
  color: var(--maroon);
}
.closing .script { display: block; font-size: clamp(44px, 8vw, 72px); line-height: 1; }
[dir="rtl"] .closing .script { line-height: 1.5; font-size: clamp(34px, 6vw, 56px); }
.closing p { margin: .5em 0 0; color: var(--ink-soft); font-style: italic; }
[dir="rtl"] .closing p { font-style: normal; }
.closing .year { font-style: normal; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-aspect-ratio: 1/1) {
  .names { width: 86%; }
  .hero-date { margin-bottom: .5em; }
  .hero-countdown .more { display: none; }
  .hero-ui::before { height: 34%; }
  .hero-ui::after { height: 34%; }
}
@media (max-height: 640px) {
  .hero-tagline, .more { display: none; }
  .hero-alt { font-size: 16px; }
}
@media (max-width: 420px) {
  .countdown { gap: 6px; }
  .countdown div { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--olive-pale); }
  .countdown b { font-size: 26px; }
  .times > div { min-width: 0; flex: 1 1 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .more svg, .hint svg { animation: none; }
}