:root{
  /* Palette: ink + blush florals + soft ivory (inspired by AMW.jpeg) */
  --bg0: #fff8f5;
  --bg1: #fffdfb;
  --ink: #1c1816;
  /* Same hue as --ink; use for rgba(var(--text-rgb), opacity) across the UI */
  --text-rgb: 28, 24, 22;
  --muted: rgba(var(--text-rgb), .66);
  --soft: rgba(var(--text-rgb), .10);

  /* Body wash: soft rose + peach (matches blush card, not sunset primaries) */
  --backdrop-lilac-rgb: 228, 204, 214;
  --backdrop-coral-rgb: 242, 212, 198;

  /* Accent: muted champagne gold (subtle, not too strong) */
  --gold0: #8e7441; /* muted gold */
  --gold1: #d9c7a5; /* soft champagne */
  --gold2: #f4efe6; /* warm ivory-gold */

  /* RGB helpers for consistent rgba usage */
  --accent0-rgb: 142, 116, 65;
  --accent1-rgb: 217, 199, 165;
  --accent2-rgb: 244, 239, 230;
  --shadow: 0 18px 55px rgba(29, 21, 12, .14);
  --radius-lg: 26px;
  --radius-md: 18px;
  --ring: 0 0 0 5px rgba(var(--accent1-rgb), .22);
  --max: 980px;

  /* Photo integration (tuned for the accent palette) */
  --photo-tint: .54;
  --photo-vignette: .18;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
/* Prevent accidental sideways scrolling on iOS */
html, body{ max-width: 100vw; overflow-x: clip; }
body{
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1000px 600px at 10% 5%, rgba(var(--backdrop-lilac-rgb), .55), transparent 56%),
    radial-gradient(900px 600px at 90% 0%, rgba(var(--backdrop-coral-rgb), .22), transparent 56%),
    radial-gradient(900px 700px at 60% 110%, rgba(var(--backdrop-lilac-rgb), .42), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: "Cormorant Garamond", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing: .2px;
}

/* Arabic-friendly fallback stack while keeping a premium serif vibe */
body[dir="rtl"]{
  font-family: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  letter-spacing: 0;
}

a{ color: inherit; }
button{ font: inherit; }

.intro{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px 16px;
}
.intro[hidden]{ display: none; }
.introBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, .62);
  backdrop-filter: blur(6px);
}
.introCard{
  position: relative;
  width: min(520px, 100%);
  perspective: 1200px;
  border-radius: 26px;
  border: 1px solid rgba(var(--accent1-rgb), .22);
  background: transparent;
  box-shadow: 0 30px 95px rgba(10, 7, 4, .40);
  text-align: center;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  animation: introIn 520ms cubic-bezier(.2,.9,.2,1) forwards;
}
.introInner{
  border-radius: 26px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(720px 420px at 20% 0%, rgba(var(--accent2-rgb), .62), transparent 58%),
    radial-gradient(680px 520px at 90% 18%, rgba(var(--accent1-rgb), .22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  transform-style: preserve-3d;
  transform-origin: 8% 50%;
  will-change: transform, opacity;
}
.introCard::before{
  /* subtle “hinge” edge like a real card */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--accent0-rgb), .20), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 42%);
  mix-blend-mode: multiply;
  opacity: .45;
}
.introMark{
  width: 62px;
  height: 18px;
  margin: 2px auto 18px;
  position: relative;
}
.introMark::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  background-color: rgba(var(--accent0-rgb), .92);
  -webkit-mask: url("./img/cross.png") center / contain no-repeat;
  mask: url("./img/cross.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 18px rgba(var(--accent0-rgb), .14));
}
.introMark::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  width: 140px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--accent0-rgb), .22), transparent);
}
.introKicker{
  margin: 0 0 6px;
  color: rgba(var(--text-rgb), .66);
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 700;
}
body[dir="rtl"] .introKicker{
  text-transform: none;
  letter-spacing: .02em;
}
.introTitle{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.35;
  color: transparent;
  background-image: linear-gradient(
    118deg,
    color-mix(in srgb, var(--ink) 72%, var(--gold0)) 0%,
    var(--gold0) 28%,
    var(--gold1) 48%,
    var(--gold2) 54%,
    var(--gold1) 66%,
    var(--gold0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 10px rgba(var(--accent0-rgb), .20));
}
.introDesc{
  margin: 0 auto 14px;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(var(--text-rgb), .74);
}
.introBtn{
  width: 100%;
  min-height: 46px;
  position: relative;
  justify-content: center;
}
.introBtn::before{
  content: "⌄";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  opacity: .92;
}
.intro.is-opening .introCard{
  animation: introOut 420ms ease forwards;
}
.intro.is-opening .introInner{
  animation: introFlip 520ms cubic-bezier(.2,.9,.2,1) forwards;
}
.intro.is-opening .introBackdrop{
  animation: introFade 420ms ease forwards;
}
@keyframes introIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes introOut{
  to { transform: translateY(-10px) scale(.985); opacity: 0; }
}
@keyframes introFlip{
  0% { transform: rotateY(0deg) translateZ(0); }
  55% { transform: rotateY(-74deg) translateZ(0); }
  100% { transform: rotateY(-92deg) translateZ(0); opacity: 0; }
}
@keyframes introFade{
  to { opacity: 0; }
}

.wrap{
  min-height: 100%;
  padding: 18px 16px 24px;
  display: grid;
  place-items: start center;
}

.shell{
  width: min(var(--max), 100%);
  max-width: 100%;
  min-width: 0;
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 14px;
  color: var(--muted);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  user-select: none;
}

#brandText:empty{
  display: none;
}

#poweredBy:empty{
  display: none;
}

.seal{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent0-rgb), .30);
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--accent2-rgb), .92), rgba(var(--accent1-rgb), .55) 55%, rgba(var(--accent0-rgb), .18) 100%);
  box-shadow: 0 10px 24px rgba(var(--accent0-rgb), .12);
  position: relative;
}
.seal::after{
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.65);
}

.controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.seg{
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent0-rgb), .22);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(29, 21, 12, .06);
}

.seg button{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(var(--text-rgb), .70);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(var(--accent2-rgb), .95), rgba(var(--accent1-rgb), .48));
  color: rgba(var(--text-rgb), .92);
  box-shadow: 0 8px 18px rgba(var(--accent0-rgb), .14);
}
.seg button:focus-visible{ outline: none; box-shadow: var(--ring); }

.iconbtn{
  appearance: none;
  border: 1px solid rgba(var(--accent0-rgb), .22);
  background: rgba(255,255,255,.55);
  color: rgba(var(--text-rgb), .82);
  border-radius: 999px;
  padding: 8px 10px;
  min-width: 40px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(29, 21, 12, .06);
}
.iconbtn:focus-visible{ outline: none; box-shadow: var(--ring); }

.card{
  position: relative;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 100%;
  background:
    radial-gradient(640px 420px at 12% 18%, rgba(var(--accent2-rgb), .55), transparent 60%),
    radial-gradient(620px 440px at 88% 22%, rgba(var(--accent1-rgb), .20), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
  border: 1px solid rgba(var(--accent0-rgb), .18);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card::before{
  /* Gold edge glow */
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--accent0-rgb), .16), transparent 18%, transparent 82%, rgba(var(--accent0-rgb), .16)),
    linear-gradient(180deg, rgba(var(--accent0-rgb), .14), transparent 18%, transparent 82%, rgba(var(--accent0-rgb), .12));
  mix-blend-mode: multiply;
}

.card::after{
  /* Photo watermark (from the physical card) */
  content:"";
  position:absolute;
  inset: -6%;
  pointer-events: none;
  opacity: .085;
  background-image: url("./img/AMW1.jpeg");
  background-repeat: no-repeat;
  background-position: 50% 38%;
  background-size: min(520px, 92%);
  filter: saturate(.90) contrast(.98) brightness(1.03) blur(.35px);
  mix-blend-mode: multiply;
  /* Fade the watermark near the top so the black “save the date” text never fights readability */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.0) 10%, rgba(0,0,0,.85) 32%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.0) 10%, rgba(0,0,0,.85) 32%, rgba(0,0,0,1) 100%);
}

.pad,
.footer{
  position: relative;
  z-index: 1;
}

.pad{ padding: 26px 18px 18px; }

.hero{
  text-align: center;
  padding: 6px 2px 14px;
  position: relative;
}

.emblem{
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 auto 6px;
}

.crossMark{
  width: 66px;
  height: 66px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(var(--accent0-rgb), .92);
  border: 1px solid rgba(var(--accent0-rgb), .18);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 16px 40px rgba(29, 21, 12, .10);
  line-height: 1;
}

.emblem .crossMark{
  margin: 0; /* spacing handled by .emblem gap */
}

.crossSvg{
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(var(--accent0-rgb), .10));
}

.crossImg{
  width: 34px;
  height: 34px;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("./img/cross.png") center / contain no-repeat;
  mask: url("./img/cross.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(176, 139, 62, .12));
}

.verse.verseInline{
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 62ch;
}

.verse.verseInline::before{
  content: "";
}

.verse.verseInline p{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(var(--text-rgb), .76);
  font-weight: 600;
}

.verse.verseInline small{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(var(--accent0-rgb), .78);
  letter-spacing: .08em;
}

body[dir="rtl"] .verse.verseInline small{
  letter-spacing: .02em;
}

.hairline{
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent0-rgb), .30), transparent);
  margin: 14px auto;
}

.kicker{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 auto 10px;
  max-width: 46ch;
}

.heroInvite{
  margin-top: 10px;
  color: rgba(var(--text-rgb), .78);
}

.families{
  margin: 12px auto 8px;
  max-width: 62ch;
}

.detailsLineWrap{
  padding: 14px 4px 0;
  text-align: center;
  display: grid;
  justify-items: center;
}

.detailsLine{
  margin: 0 auto;
  max-width: 64ch;
  font-size: 18px;
  line-height: 2.0;
  color: rgba(var(--text-rgb), .82);
  text-wrap: balance;
  font-weight: 700;
  font-style: italic;
  overflow-wrap: anywhere;
}

.detailSection{
  margin: 8px auto 0;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(var(--text-rgb), .80);
  text-wrap: balance;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.detailFacts{
  font-style: italic;
  font-weight: 550;
}

.detailsLineWrap .cta{
  justify-content: center;
}

.detailSection.muted{
  color: rgba(var(--text-rgb), .66);
  font-weight: 550;
}

/* Arabic: don’t break inside words; <wbr> only after • between clauses */
body[dir="rtl"] .detailsLine,
body[dir="rtl"] .detailSection{
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: wrap;
}

.familiesRow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent0-rgb), .12);
  background: rgba(255, 255, 255, .45);
}

.family{
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--text-rgb), .70);
  letter-spacing: .06em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Keep “and family / وعائلته” together if it wraps */
.familySuffix{
  display: inline-block;
  white-space: nowrap;
}

/* If one side wraps, force both suffixes to the next line */
.family.forceSuffixBreak .familyGlue{
  display: none;
}
.family.forceSuffixBreak .familySuffix{
  display: block;
  white-space: nowrap;
}

body[dir="rtl"] .family{
  letter-spacing: .02em;
}

.familyAnd{
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(var(--accent0-rgb), .70);
  letter-spacing: .18em;
}

body[dir="rtl"] .familyAnd{
  letter-spacing: .02em;
}

.familyInvite{
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(var(--text-rgb), .66);
  font-style: italic;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

@media (max-width: 420px){
  .familiesRow{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .familyAnd{
    letter-spacing: .14em;
  }
}

.names{
  margin: 0;
  font-weight: 650;
  font-size: clamp(34px, 8.3vw, 62px);
  line-height: 1.06;
  color: transparent;
  /* Shine layer (top) + base gold (bottom), both clipped to glyphs */
  background-image:
    linear-gradient(
      100deg,
      transparent 38%,
      color-mix(in srgb, var(--gold2) 55%, #fff) 47%,
      rgba(255, 255, 255, .72) 50%,
      color-mix(in srgb, var(--gold2) 55%, #fff) 53%,
      transparent 62%
    ),
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--ink) 72%, var(--gold0)) 0%,
      var(--gold0) 24%,
      var(--gold1) 42%,
      var(--gold2) 50%,
      var(--gold1) 58%,
      var(--gold0) 100%
    );
  background-size: 240% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(var(--accent0-rgb), .24));
  text-wrap: balance;
  will-change: background-position;
  animation: namesShine 9s ease-in-out infinite alternate;
}

@keyframes namesShine{
  0%{ background-position: -95% 0, 0 0; }
  100%{ background-position: 95% 0, 0 0; }
}

.amp{
  display: inline-block;
  margin: 0 .35em;
  color: rgba(var(--accent0-rgb), .92);
  font-weight: 500;
}

.sub{
  margin: 10px auto 0;
  color: rgba(var(--text-rgb), .74);
  font-size: 15px;
  line-height: 1.8;
  max-width: 64ch;
  text-wrap: balance;
}

.verse{
  margin: 16px auto 0;
  padding: 14px 14px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent0-rgb), .16);
  background: rgba(255, 255, 255, .52);
  max-width: 62ch;
  position: relative;
}
.verse::before{
  content:"“";
  position:absolute;
  inset-inline-start: 12px;
  top: -14px;
  font-size: 46px;
  color: rgba(var(--accent1-rgb), .40);
  line-height: 1;
}
.verse p{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(var(--text-rgb), .86);
}
.verse small{
  display:block;
  margin-top: 8px;
  color: rgba(var(--text-rgb), .62);
  font-size: 13px;
}

.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.detailsSection{
  margin-top: 14px;
}

.panel{
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent0-rgb), .14);
  background: rgba(255, 255, 255, .55);
  padding: 14px 14px 12px;
  overflow: hidden;
}

.panel h2{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--accent0-rgb), .86);
}

body[dir="rtl"] .panel h2{
  text-transform: none;
  letter-spacing: .02em;
}

.dedicationPanel{
  margin-top: 14px;
  text-align: center;
  background:
    radial-gradient(520px 220px at 50% -20%, rgba(var(--accent2-rgb), .5), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .48));
  border-color: rgba(var(--accent0-rgb), .16);
}

.dedicationTitle{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(var(--accent0-rgb), .92);
}

body[dir="rtl"] .dedicationTitle{
  letter-spacing: .06em;
}

body[dir="ltr"] .dedicationTitle{
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
}

.dedicationBody{
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: 56ch;
  margin-inline: auto;
  padding: 2px 4px 6px;
}

.dedicationLine{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(var(--text-rgb), .82);
  text-wrap: balance;
}

.dedicationLine--lead{
  font-weight: 650;
}

.dedicationLine--note{
  font-style: italic;
  font-weight: 550;
  color: rgba(var(--text-rgb), .74);
}

.dedicationAccount{
  margin: 2px 0 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent0-rgb), .2);
  background: rgba(255, 255, 255, .55);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(var(--accent0-rgb), .98);
  font-variant-numeric: lining-nums;
  unicode-bidi: isolate;
}

.rows{
  display: grid;
  gap: 10px;
}

.row{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.dot{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent2-rgb), .95), rgba(var(--accent1-rgb), .55) 60%, rgba(var(--accent0-rgb), .18));
  border: 1px solid rgba(var(--accent0-rgb), .22);
  box-shadow: 0 8px 16px rgba(var(--accent0-rgb), .08);
}

.label{
  display: block;
  font-size: 12px;
  color: rgba(var(--text-rgb), .60);
  margin-bottom: 2px;
}

.value{
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(var(--text-rgb), .84);
  text-wrap: balance;
}

#rsvpPanel .value{
  font-size: 15px;
}

.rsvpPartyGuests{
  margin: -2px 0 14px;
  padding: 0 4px;
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(var(--text-rgb), .84);
  font-weight: 600;
}

.rsvpPartyGuests__num{
  font-variant-numeric: lining-nums;
  font-weight: 700;
  color: rgba(var(--accent0-rgb), .96);
  unicode-bidi: isolate;
}

.rsvpLink{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent0-rgb), .22);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.rsvpPhone{
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums;
}

.rsvpName,
.rsvpSep{
  unicode-bidi: isolate;
}

.rsvpLink:hover{
  border-bottom-color: rgba(var(--accent0-rgb), .55);
}

.rsvpLink:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

.cta{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn{
  appearance: none;
  border: 1px solid rgba(var(--accent0-rgb), .24);
  background: linear-gradient(180deg, rgba(var(--accent2-rgb), .92), rgba(var(--accent1-rgb), .38));
  color: rgba(var(--text-rgb), .92);
  border-radius: 999px;
  padding: 11px 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(var(--accent0-rgb), .10);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
}
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

.btn.secondary{
  background: rgba(255, 255, 255, .60);
  box-shadow: 0 10px 22px rgba(29, 21, 12, .06);
}

.btn span{ line-height: 1; }

.countdown{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.chip{
  border-radius: 16px;
  border: 1px solid rgba(var(--accent0-rgb), .14);
  background: rgba(255, 255, 255, .60);
  padding: 10px 8px;
  text-align: center;
}

.chip strong{
  display: block;
  font-size: 18px;
  color: rgba(var(--accent0-rgb), .96);
}
.chip small{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(var(--text-rgb), .62);
}

.galleryWrap{
  /* Wrapper: no scrolling/effects, just holds sections. */
  width: 100%;
}

.gallery{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent0-rgb), .14);
  background: rgba(255,255,255,.35);
  padding: 8px 10px;
  position: relative;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

.gallerySection{
  margin-top: 12px;
}

.gallerySectionsRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gallerySectionsRow .gallerySection{
  margin-top: 0;
}

.gallerySectionTitle{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(var(--accent0-rgb), .88);
  margin: 0 2px 8px;
}

body[dir="rtl"] .gallerySectionTitle{
  text-transform: none;
  letter-spacing: .02em;
}

/* Always stack sections vertically (one section per row). */

.gallery::-webkit-scrollbar{ display: none; }

/* Soft “film strip” edge fade to blend into the card */
.gallery::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 248, 245, .88), transparent 14%, transparent 86%, rgba(255, 253, 251, .88));
  mix-blend-mode: multiply;
  opacity: .35;
}

/* Gentle shimmer that ties photos together on hover */
.gallery::after{
  content:"";
  position:absolute;
  top: -40%;
  bottom: -40%;
  width: 34%;
  inset-inline-start: -40%;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), .32), transparent);
  transform: skewX(-14deg);
  opacity: 0;
}

.gallery--section:hover::after{
  opacity: 1;
  animation: gallerySweep 1400ms ease-in-out;
}

@keyframes gallerySweep{
  from { inset-inline-start: -40%; }
  to   { inset-inline-start: 110%; }
}

.galleryPanel{
  /* Make photos feel integrated, less “boxed section”. */
  background: transparent;
  border: 0;
  padding: 8px 2px 0;
}

.galleryPanel h2{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(var(--text-rgb), .62);
}

.galleryPanel::before{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent0-rgb), .18), transparent);
  margin: 2px auto 14px;
}

.ph{
  flex: 0 0 auto;
  width: clamp(170px, 42vw, 240px);
  aspect-ratio: 3 / 4;
  border-radius: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: none;
  scroll-snap-align: start;
  border-radius: 16px;
  transform: translateY(0);
  transition: transform 260ms ease, box-shadow 260ms ease, opacity 260ms ease, filter 260ms ease;
}

/* Integrate photos as a cohesive strip (slight overlap + gold edge) */
.ph{
  box-shadow: 0 18px 44px rgba(29, 21, 12, .10);
  border: 1px solid rgba(var(--accent0-rgb), .14);
  background: rgba(255,255,255,.38);
}

/* Separator that never affects layout width */
.ph::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 2px rgba(var(--accent0-rgb), .08);
  opacity: .95;
}
.ph::after{
  content:"";
  position:absolute;
  inset: 0;
  /* Card-tint layer to integrate photos with ivory/gold palette */
  background:
    radial-gradient(560px 300px at 18% 10%, rgba(var(--accent2-rgb), .70), transparent 60%),
    radial-gradient(520px 340px at 86% 18%, rgba(var(--accent1-rgb), .26), transparent 62%),
    radial-gradient(140% 110% at 50% 55%, transparent 56%, rgba(20, 14, 8, var(--photo-vignette)) 100%),
    linear-gradient(180deg, rgba(var(--accent2-rgb), .20), rgba(var(--accent0-rgb), .10));
  opacity: var(--photo-tint);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ph::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  /* Subtle inner edge like printed photo */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 2px rgba(var(--accent0-rgb), .08);
  opacity: .95;
}
.ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Happier look while staying warm & cohesive with the card */
  filter: grayscale(.10) sepia(.10) saturate(1.16) contrast(1.04) brightness(1.10);
  transform: scale(1.02);
  transition: transform 260ms ease;
}
.ph:focus-visible{ outline: none; box-shadow: var(--ring); }
.ph:hover img{ transform: scale(1.06); }

/* Group interaction: calm the strip, highlight the active photo */
.gallery--section:hover .ph{ opacity: .78; }
.gallery--section:hover .ph:hover{
  opacity: 1;
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(29, 21, 12, .16);
  border-color: rgba(var(--accent1-rgb), .40);
}

/* Slightly “opens up” on hover/focus while staying tonal */
.ph:hover img,
.ph:focus-visible img{
  filter: grayscale(.05) sepia(.08) saturate(1.22) contrast(1.06) brightness(1.12);
}

/* Lightbox: add a subtle matching tint/vignette */
.lbimg{
  position: relative;
}
.lbimg::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 50%, transparent 58%, rgba(20, 14, 8, .16) 100%),
    linear-gradient(180deg, rgba(var(--accent2-rgb), .10), rgba(var(--accent0-rgb), .10));
  opacity: .55;
  mix-blend-mode: multiply;
}

.footer{
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(var(--accent0-rgb), .12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(var(--text-rgb), .58);
  font-size: 12px;
}

.closing{
  margin-top: 12px;
  padding: 10px 6px 2px;
  text-align: center;
}

.closing p{
  margin: 0;
  max-width: 62ch;
  margin-inline: auto;
  color: rgba(var(--text-rgb), .70);
  font-size: 14px;
  line-height: 1.9;
  font-style: italic;
  text-wrap: balance;
}

.err{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255, 250, 245, .85);
  border: 1px solid rgba(176, 60, 62, .22);
  color: rgba(85, 24, 26, .92);
  font-size: 13px;
  line-height: 1.6;
}

dialog{
  border: 0;
  padding: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(29, 21, 12, .30);
  width: min(920px, calc(100vw - 24px));
}
dialog::backdrop{
  background: rgba(20, 14, 8, .55);
  backdrop-filter: blur(3px);
}

.lightbox{
  display: grid;
  grid-template-rows: auto 1fr;
}
.lbbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(var(--accent0-rgb), .14);
}
.lbtitle{
  font-size: 13px;
  color: rgba(var(--text-rgb), .70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
.lbimg{
  padding: 10px;
}
.lbimg img{
  width: 100%;
  height: min(70vh, 560px);
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: rgba(250, 247, 240, .65);
  border: 1px solid rgba(var(--accent0-rgb), .12);
}

/* Desktop refinements */
@media (min-width: 820px){
  .wrap{ padding: 26px 24px 34px; }
  .pad{ padding: 34px 32px 22px; }
  .grid{ grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 18px; }
  .gallery{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .ph img{ transition: none; }
  .ph:hover img{ transform: none; }
  .names{
    animation: none;
    will-change: auto;
    background-image: linear-gradient(
      118deg,
      color-mix(in srgb, var(--ink) 72%, var(--gold0)) 0%,
      var(--gold0) 24%,
      var(--gold1) 42%,
      var(--gold2) 50%,
      var(--gold1) 58%,
      var(--gold0) 100%
    );
    background-size: auto;
    background-position: 0 0;
  }
}

@media (max-width: 420px){
  .pad{ padding: 22px 14px 16px; }
  .crossMark{ width: 58px; height: 58px; }
  .crossSvg{ width: 26px; height: 26px; }
  .detailsLine{ font-size: 17px; }
  .detailSection{ font-size: 16px; }
}

/* Keep numerals consistent inside RTL */
body[dir="rtl"] .countdown,
body[dir="rtl"] .value{
  font-variant-numeric: lining-nums;
}