@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f5f0;
  --ink: #303d35;
  --muted: #6d7269;
  --gold: #9c8661;
  --line: #e3dfd4;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; min-width: 280px; background: radial-gradient(ellipse at 50% 4%, #fffdf8 0, transparent 56%), var(--paper); }
a { touch-action: manipulation; }
a { color: inherit; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
::selection { background: #dce2d3; color: #243a2d; }
:focus-visible { outline: 3px solid #637b57; outline-offset: 6px; }

.skip-link { position: absolute; top: 8px; inset-inline-start: 16px; z-index: 10; transform: translateY(-160%); padding: 12px 20px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.invitation-header { padding: 38px 24px 28px; text-align: center; animation: arrive 750ms ease-out both; }
.wordmark { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 14px; color: var(--gold); }
.fine-line { width: 38px; height: 1px; background: var(--line); }
.rings { width: 43px; height: 30px; stroke: currentColor; stroke-width: 1.15; }
.eyebrow { margin: 0 0 9px; color: #7d6948; font-size: 0.875rem; font-weight: 400; line-height: 1.9; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.6rem, 5.8vw, 2.05rem); line-height: 1.8; font-weight: 500; }
.header-note { margin-bottom: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.9; font-weight: 300; }

.invitation { text-align: center; }
.video-frame { width: min(100%, 390px); margin-inline: auto; padding: 8px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 65px -32px #38412b42; background: #fffcf6; animation: arrive 900ms 80ms ease-out both; }
.video-stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; background: #deddd4; aspect-ratio: 390 / 854; }
video { display: block; width: 100%; height: 100%; object-fit: contain; background: #151815; pointer-events: none; user-select: none; -webkit-user-select: none; }
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }
.video-status { max-width: 420px; margin: 14px auto 0; padding-inline: 20px; color: var(--muted); font-size: 0.875rem; line-height: 1.9; }

.directions { width: min(100%, 480px); margin: 0 auto; padding: 45px 24px 0; text-align: center; }
.section-ornament { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 25px; color: var(--gold); }
.section-ornament span { width: 56px; height: 1px; background: var(--line); }
.section-ornament svg { width: 22px; height: 22px; }
h2 { margin-bottom: 9px; font-size: 1.625rem; line-height: 1.8; font-weight: 500; }
.section-note { margin-bottom: 27px; color: var(--muted); font-size: 0.9375rem; line-height: 1.9; font-weight: 300; }
.map-links { display: grid; gap: 12px; text-align: start; }
.map-link { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; text-decoration: none; box-shadow: 0 3px 9px #424c2f03; transition: transform 200ms, box-shadow 200ms, border-color 200ms, background 200ms; }
.map-icon { display: grid; place-items: center; flex-shrink: 0; width: 47px; height: 47px; border-radius: 13px; }
.map-icon svg { width: 29px; height: 29px; }
.map-icon--neshan { color: #386098; background: #edf1f7; }
.map-icon--balad { color: #278779; background: #e9f2ed; }
.map-icon--google { background: #f4f1e8; }
.map-copy { display: grid; gap: 3px; }
.map-name { font-size: 1.0625rem; line-height: 1.6; font-weight: 500; }
.map-description { color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
.map-description[lang="en"] { text-align: right; font-weight: 300; }
.map-action { display: grid; place-items: center; margin-inline-start: auto; color: #8d9387; }
.map-action svg { width: 19px; height: 19px; }
.map-link:active { transform: scale(0.985); background: #f0f2e9; }
@media (hover: hover) {
  .map-link:hover { transform: translateY(-3px); border-color: #bec5b4; background: #fffefa; box-shadow: 0 9px 25px -10px #39442b28; }
}

.footer { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 47px 24px max(36px, env(safe-area-inset-bottom)); text-align: center; color: var(--gold); }
.footer svg { width: 19px; height: 19px; }
.footer p { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 300; }
.footer-line { width: 30px; height: 1px; margin-top: 7px; background: var(--line); }

@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .invitation-header { padding: max(27px, env(safe-area-inset-top)) 20px 25px; }
  .wordmark { gap: 16px; margin-bottom: 10px; }
  .rings { width: 37px; height: 26px; }
  .eyebrow { margin-bottom: 5px; }
  .header-note { font-size: 0.875rem; }
  .video-frame { width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: 0 13px 35px -25px #303d354d; }
  .video-stage { border-radius: 0; }
  .directions { padding-top: 37px; padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}

@media (max-width: 350px) {
  .directions { padding-inline: 18px; }
  .map-link { padding: 15px; gap: 12px; }
  h2 { font-size: 1.45rem; }
}

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