/* Keep one invitation and uninterrupted audio while its language changes. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.language-switch {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid #dec6bd;
  border-radius: 999px;
  background: #fffaf4f5;
  color: #79555b;
  box-shadow: 0 3px 15px #5927330c;
  font: .875rem/1.5 Arial, sans-serif;
}
.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 60px;
  padding: 7px 9px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
}
.language-switch a[lang="fa"] { font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; }
.language-switch a[aria-current="page"] { color: var(--wine); background: #f4e8e3; font-weight: 700; }
.language-switch a:hover { color: var(--wine); background: #f4e8e3; }
.language-switch a:focus-visible { outline-offset: 3px; }
.cover { padding-top: 90px; }
.wedding-hero { padding-top: 90px; }
.celebration-title > span { display: inline; }
html[lang="fa"] { font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; }
html[lang="fa"] :is(h1, h2, h3, p, .little-names, .little-eyebrow, .little-date, .detail-label, .hero-date, .cover-date, .eyebrow) {
  letter-spacing: normal;
  text-transform: none;
}
html[lang="fa"] :is(.eyebrow, .little-eyebrow, .cover-date, .hero-date, .detail-label, .music-toggle) { font-family: inherit; }
html[lang="fa"] :is(.ampersand, .hero-names em, .little-names em, .story-link, .geranium-photo figcaption, .wedding-footer em) { font-style: normal; }
html[lang="fa"] h1 { font-size: clamp(2.1rem, 4.5vw, 4rem); line-height: 1.65; }
html[lang="fa"] .hero-names { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.5; }
html[lang="fa"] .hero-names em { line-height: 1.2; }
html[lang="fa"] .hero-date { line-height: 2; }
html[lang="fa"] .section-title { line-height: 1.7; font-size: clamp(2rem, 3.8vw, 3rem); }
html[lang="fa"] .story-copy { text-align: start; }
html[lang="fa"] .story-copy > p { line-height: 2.15; }
html[lang="fa"] .geranium-photo figcaption { line-height: 1.95; }
html[lang="fa"] .celebration-title { line-height: 1.8; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
html[lang="fa"] .event-where h3 { font-size: 1.85rem; line-height: 1.7; }
html[lang="fa"] .event-day { line-height: 1.3; padding-right: 0; }
html[lang="fa"] .arrival-note { line-height: 2; }
html[lang="fa"] .event-where address { font-family: Georgia, 'Times New Roman', serif; unicode-bidi: isolate; }
html[lang="fa"] :is(.seal span, .small-seal span) { font-family: Georgia, 'Times New Roman', serif; }
/* RTL grid auto-placement puts the text on the right and the actual photo on the left. */
html[dir="rtl"] .event-when { border-right: 0; border-left: 1px solid #cbb0a4; padding: 8px 0 8px 28px; }
html[dir="rtl"] .music-toggle { right: auto; left: max(22px, env(safe-area-inset-left)); }
@media (max-width: 650px) {
  .language-switch { top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .wedding-hero { padding-top: 82px; }
  /* Persian needs more vertical breathing room than the English photo overlay. */
  html[lang="fa"] .hero-copy { grid-row: 1; padding: 8px 12px 28px; color: var(--ink); text-shadow: none; }
  html[lang="fa"] .hero-photo { grid-row: 2; }
  html[lang="fa"] .hero-photo::after { display: none; }
  html[lang="fa"] .hero-names { display: flex; align-items: baseline; justify-content: center; gap: .2em; font-size: clamp(2.2rem, 9.5vw, 3.3rem); line-height: 1.55; }
  html[lang="fa"] .hero-names em { color: #94656d; margin: 0; }
  html[lang="fa"] .hero-date { margin-top: 12px; }
  html[lang="fa"] .section-title { font-size: 2.2rem; }
  html[lang="fa"] .celebration-title { font-size: clamp(1.7rem, 6.6vw, 2.3rem); }
  html[lang="fa"] .event-where h3 { font-size: 1.5rem; }
  html[dir="rtl"] .event-when { padding-left: 16px; }
  html[dir="rtl"] .music-toggle { left: max(16px, env(safe-area-inset-left)); }
}
@media (max-width: 520px) {
  html[lang="fa"] h1 { max-width: none; font-size: clamp(2.15rem, 9vw, 2.85rem); }
  html[lang="fa"] h1 .ampersand { display: inline-block; line-height: inherit; margin: 0 .08em; }
  html[lang="fa"] .little-names { font-size: clamp(1.1rem, 4.6vw, 1.7rem); line-height: 1.7; }
  html[lang="fa"] .cover-heading { margin-bottom: 38px; }
}
@media (max-width: 360px) {
  html[dir="rtl"] .event-when { border-left: 0; padding: 0 0 24px; }
}