/* ==========================================================================
   Ali & Fatema · Wedding Invitation — Meher
   Ivory stationery × jewel-toned florals × gold filigree × Mughal arches.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------ */

@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-bismillah.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20, U+627-628, U+62D, U+631, U+633, U+644-647, U+64A;
}

/* ---- Design tokens ---------------------------------------------------- */

:root {
  /* Paper */
  --c-paper: #fffaf2;
  --c-ivory: #fbf5ea;
  --c-champagne: #f3e7d2;
  --c-champagne-deep: #e8d6b8;
  --c-blush: #f1d8cf;
  --c-blush-deep: #e5bfb3;

  /* Jewels */
  --c-rose: #d9a69c;
  --c-coral: #cf8571;
  --c-wine: #6e1e31;
  --c-wine-deep: #531626;
  --c-emerald: #1f5a46;
  --c-emerald-deep: #164536;
  --c-leaf: #2e6a52;

  /* Gold */
  --c-gold: #b8914f;
  --c-gold-light: #dfc48f;
  --c-gold-deep: #8a6830;
  --c-gold-line: rgba(184, 145, 79, 0.55);
  --c-gold-hair: rgba(184, 145, 79, 0.28);

  /* Text */
  --c-ink: #43262b;          /* warm wine-brown body text */
  --c-ink-soft: #6a4a48;

  --foil: linear-gradient(100deg, #8a6830 0%, #c29a56 22%, #dcbf86 40%, #a27a3a 58%, #c9a462 76%, #7e5e2a 100%);
  --foil-light: linear-gradient(100deg, #c9a462 0%, #f0dcaa 30%, #d8b878 55%, #f3e2b8 75%, #c39b58 100%);

  /* Type */
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-sans: "Jost", "Avenir Next", "Futura", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Amiri", "Traditional Arabic", serif;

  --fs-names: clamp(3.1rem, 15.5vw, 5.4rem);
  --fs-person: clamp(3rem, 14.5vw, 4.4rem);
  --fs-body: 1.14rem;

  /* Space */
  --gutter: clamp(1rem, 4.5vw, 2rem);
  --section-y: clamp(4rem, 13vw, 7rem);

  /* Depth: soft, warm and "embossed" rather than dark */
  --emboss: drop-shadow(0 12px 18px rgba(122, 82, 40, 0.17));
  --panel-shadow: drop-shadow(0 14px 18px rgba(83, 22, 38, 0.22));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-door: cubic-bezier(0.76, 0, 0.24, 1);

  /* Interlocking-circle jaali, gold on paper */
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23b8914f' stroke-width='0.6'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3Cg fill='%23b8914f'%3E%3Ccircle cx='20' cy='0' r='1'/%3E%3Ccircle cx='0' cy='20' r='1'/%3E%3Ccircle cx='40' cy='20' r='1'/%3E%3Ccircle cx='20' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-ivory);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-ivory);
  color: var(--c-ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper fibre over everything (static layer). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.09;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
svg { display: block; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.foil { color: var(--c-gold-deep); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil {
    background-image: var(--foil);
    background-size: 200% 100%;
    background-position: 20% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.divider {
  width: 220px;
  height: 26px;
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}

/* Lines drawn by main.js */
.ln {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.ln--gold { stroke: var(--c-gold); stroke-width: 1; }
.ln--thick { stroke-width: 1.6; }
.ln--fine { stroke-width: 0.75; stroke-opacity: 0.8; }
.ln--emerald { stroke: var(--c-emerald); stroke-width: 1; stroke-opacity: 0.75; }

.arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ==========================================================================
   THE GATE — a sealed invitation that opens on arrival
   ========================================================================== */

.gate { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .gate {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
}

.gate__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, var(--c-paper), var(--c-champagne));
  transition: transform 1.5s var(--ease-door) 0.5s;
  will-change: transform;
}
.gate__door::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jaali);
  background-size: 40px 40px;
  opacity: 0.22;
}
.gate__door::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--c-gold);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--c-gold-hair);
}
.gate__door--l { left: 0; box-shadow: inset -1px 0 0 var(--c-gold), 8px 0 24px rgba(122, 82, 40, 0.12); }
.gate__door--r { right: 0; box-shadow: inset 1px 0 0 var(--c-gold), -8px 0 24px rgba(122, 82, 40, 0.12); }
.gate__door--l::after { right: 0; border-right: 0; }
.gate__door--r::after { left: 0; border-left: 0; }

.is-ready .gate__door--l { transform: translateX(-101%); }
.is-ready .gate__door--r { transform: translateX(101%); }

/* Seal medallion (gate + closing) */
.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2a6e57, var(--c-emerald) 55%, var(--c-emerald-deep));
  box-shadow:
    0 0 0 2px var(--c-gold),
    0 0 0 6px var(--c-paper),
    0 0 0 7px var(--c-gold-line),
    0 14px 30px rgba(31, 90, 70, 0.28);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(223, 196, 143, 0.6);
}
.seal__mono {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--c-gold-light);
}
.seal__mono .script { font-size: 1em; padding-top: 0.1em; }
.seal__amp {
  font-family: var(--font-display);
  font-size: 0.42em;
  font-style: italic;
  color: var(--c-gold-light);
}
.seal--photo { overflow: hidden; }
.seal__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.gate__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease 0.1s, transform 0.8s var(--ease) 0.1s;
}
.is-ready .gate__seal { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }

/* ==========================================================================
   1 · COVER
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 90px 0 40px;  /* the arch's top and bottom offsets */
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, var(--c-paper), transparent 70%),
    radial-gradient(ellipse 130% 100% at 50% 50%, var(--c-ivory) 40%, var(--c-champagne) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jaali);
  background-size: 40px 40px;
  background-position: center;
  opacity: 0.2;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.toran {
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  width: calc(100% - 38px);
  height: 42px;
  pointer-events: none;
}

.corner {
  position: absolute;
  z-index: 2;
  width: clamp(92px, 27vw, 150px);
  height: clamp(92px, 27vw, 150px);
  pointer-events: none;
}
.corner--tl { top: 12px; left: 12px; }
.corner--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.corner--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.corner--br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* The arch fills the cover, and grows with its content if a screen is short */
.hero__arch {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 56px), 34rem);
  margin: 0 auto;
}
.hero__arch .arch { filter: var(--emboss); }

.finial {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -22px;
  width: 48px;
  height: 48px;
  margin-left: -24px;
}

.hero__content {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* clear the narrow top of the arch */
  padding: clamp(5.5rem, 26vw, 8.5rem) clamp(1rem, 4vw, 1.25rem) 0.6rem;
  text-align: center;
}

.bismillah {
  margin-top: auto; /* with the countdown's margin-bottom: centres the text block */
  font-family: var(--font-arabic);
  font-size: clamp(1.5rem, 6.8vw, 2.1rem);
  line-height: 1.65;
  color: var(--c-emerald);
  white-space: nowrap;
}
.hero__divider { width: 190px; height: 22px; margin-top: 0.2rem; }

.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(0.8rem, 3vw, 1.4rem) 0 clamp(0.9rem, 3.5vw, 1.4rem);
  font-weight: 400;
}
.names__name {
  display: block;
  font-size: var(--fs-names);
  line-height: 1.15;
  /* room for swashes so they are never clipped */
  padding: 0 0.22em;
}
.names__amp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.15em 0 -0.05em;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--c-wine);
}
.names__spray {
  width: clamp(64px, 19vw, 92px);
  height: calc(clamp(64px, 19vw, 92px) * 0.43);
}
.names__spray--l { transform: scaleX(-1); }

.hero__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 3.7vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-wine);
}
.hero__title::before,
.hero__title::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--c-gold);
  transform: rotate(45deg);
}

.hero__dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 4.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: var(--c-emerald);
}
.hero__dash { color: var(--c-gold); letter-spacing: 0; padding: 0; line-height: 1.1; }

/* Countdown: a fine gold-ruled ribbon of figures beneath the dates */
.countdown {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 0.85rem);
  margin: clamp(0.85rem, 3vw, 1.15rem) 0 auto;
  padding: 0.55rem clamp(0.4rem, 2.5vw, 1rem) 0.5rem;
}
.countdown::before,
.countdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-gold-line) 20%, var(--c-gold-line) 80%, transparent);
}
.countdown::before { top: 0; }
.countdown::after { bottom: 0; }
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.4rem;
}
.countdown__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-wine);
}
.countdown__label {
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.countdown__sep {
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.6rem;
  background: var(--c-gold);
  transform: rotate(45deg);
}

.scroll-cue {
  position: relative;
  z-index: 3;
  flex: none;
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-gold-deep);
}
.scroll-cue span { padding-left: 0.34em; }
.scroll-cue svg { width: 12px; height: 18px; }
.scroll-cue:focus-visible { outline: 1px solid var(--c-gold); outline-offset: 2px; }

/* Short phones: tighten the cover so nothing crowds the arch */
@media (max-height: 760px) {
  :root { --fs-names: clamp(2.8rem, 14vw, 4.6rem); }
  .hero__content { padding-top: clamp(5rem, 24vw, 7.5rem); }
  .hero__dates { margin-top: 0.5rem; }
}

/* ==========================================================================
   2 · INVITATION & COUPLE
   ========================================================================== */

.invite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-y) var(--gutter);
  background:
    radial-gradient(ellipse 90% 45% at 50% 62%, rgba(241, 216, 207, 0.85), transparent 70%),
    linear-gradient(to bottom, var(--c-champagne), var(--c-ivory) 18%, var(--c-ivory) 82%, var(--c-blush));
}

.watermark {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 64%;
  width: min(150vw, 820px);
  height: min(150vw, 820px);
  transform: translate(-50%, -50%);
  opacity: 0.16;
  will-change: transform;
}

.invite__inner {
  max-width: 31rem;
  margin: 0 auto;
  text-align: center;
}

.crest {
  width: min(100%, 300px);
  height: calc(min(100%, 300px) * 0.23);
  margin: 0 auto 1.4rem;
}

.blessing-panel {
  position: relative;
  padding: clamp(1.6rem, 6vw, 2.2rem) clamp(1.1rem, 5vw, 2rem);
  background:
    linear-gradient(var(--c-paper), var(--c-paper)) padding-box;
  border: 1px solid var(--c-gold);
  box-shadow:
    inset 0 0 0 5px var(--c-paper),
    inset 0 0 0 6px rgba(31, 90, 70, 0.55),
    inset 0 0 0 9px var(--c-paper),
    inset 0 0 0 10px var(--c-gold-hair),
    0 1px 0 #fff,
    0 18px 30px -18px rgba(122, 82, 40, 0.35);
}
.jewel {
  position: absolute;
  width: 22px;
  height: 22px;
}
.jewel--tl { top: -11px; left: -11px; }
.jewel--tr { top: -11px; right: -11px; }
.jewel--bl { bottom: -11px; left: -11px; }
.jewel--br { bottom: -11px; right: -11px; }

.line { display: block; }

.blessing {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-ink);
  text-wrap: balance;
}
.line--emphasis {
  margin-top: 0.6rem;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-emerald);
}
.line--cont { margin-top: 0; }

.request {
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink-soft);
  text-wrap: balance;
}
.request--closing { margin-top: 1rem; }

.couple { margin: 1.2rem 0 1.4rem; }

.person__name {
  display: inline-block;
  font-size: var(--fs-person);
  line-height: 1.2;
  padding: 0 0.22em;
}
.person__parents {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-wine);
  text-wrap: balance;
}

.wreath {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 1.1rem auto 0.9rem;
}
.wreath svg { width: 100%; height: 100%; }
.wreath__amp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 0.1em;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 500;
  color: var(--c-wine);
}

.invite .divider { margin-top: 0.4rem; }

/* ==========================================================================
   3 · WEDDING PROGRAMME
   ========================================================================== */

.programme {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 8vw, 4rem) var(--gutter) var(--section-y);
  background:
    linear-gradient(to bottom, var(--c-blush), var(--c-ivory) 14%, var(--c-ivory) 86%, var(--c-champagne));
}
.programme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jaali);
  background-size: 40px 40px;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.programme__head {
  text-align: center;
  margin-bottom: clamp(3.2rem, 11vw, 4.5rem);
}
.programme__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.6rem 0 0.4rem;
  font-weight: 400;
}
.programme__kicker {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  color: var(--c-wine);
}
.programme__script {
  margin-top: -0.05em;
  padding: 0 0.2em;
  font-size: clamp(3.2rem, 15vw, 4.6rem);
  line-height: 1.15;
  color: var(--c-emerald);
}

.panels {
  display: grid;
  gap: clamp(3.4rem, 12vw, 4.2rem);
  max-width: 25rem;
  margin: 0 auto;
}

.panel {
  --panel-bg: var(--c-emerald);
  --panel-bg-2: var(--c-emerald-deep);
  --panel-ink: var(--c-paper);
  --panel-soft: rgba(255, 250, 242, 0.8);
  --panel-accent: var(--c-gold-light);
  --panel-line: var(--c-gold-light);
  position: relative;
  color: var(--panel-ink);
}
.panel--blush {
  --panel-bg: #f0d3c9;
  --panel-bg-2: #e6bdb0;
  --panel-ink: var(--c-wine-deep);
  --panel-soft: #6b3a3d;
  --panel-accent: var(--c-wine);
  --panel-line: var(--c-gold);
}
.panel--wine {
  --panel-bg: var(--c-wine);
  --panel-bg-2: var(--c-wine-deep);
}

.panel__bg { filter: var(--panel-shadow); }
.panel__fill { fill: var(--panel-bg); }
.panel__ln { stroke: var(--panel-line); stroke-width: 1; }
.panel__ln--fine { stroke-opacity: 0.55; stroke-width: 0.75; }

.panel__crest {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -20px;
  width: 42px;
  height: 42px;
  margin-left: -21px;
}

.panel__inner {
  position: relative;
  padding: clamp(5.2rem, 22vw, 6rem) clamp(1.4rem, 6vw, 2rem) 2.4rem;
  text-align: center;
}

.panel__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
}
.panel__weekday {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  text-transform: uppercase;
  color: var(--panel-accent);
}
.panel__num {
  margin: 0.15rem 0 -0.1rem;
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 21vw, 5.4rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--panel-ink);
}
.panel--emerald .panel__num,
.panel--wine .panel__num {
  background-image: var(--foil-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panel__month {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
}
.panel__year { font-weight: 500; }
.panel__hijri {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-style: italic;
  font-weight: 500;
  color: var(--panel-soft);
}

.panel__divider { width: 190px; height: 22px; margin: 1.1rem auto 1.3rem; }
.panel--emerald .panel__divider,
.panel--wine .panel__divider { filter: brightness(1.35) saturate(0.9); }

.panel__events {
  display: grid;
  gap: 1.35rem;
  list-style: none;
}
.pevent + .pevent::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 1.35rem;
  background: linear-gradient(to right, transparent, var(--panel-line), transparent);
}
.pevent__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5.3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: clamp(0.06em, 0.5vw, 0.1em);
  padding-left: clamp(0.06em, 0.5vw, 0.1em);
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--panel-ink);
}
.pevent__time,
.pevent__venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.pevent__time {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--panel-accent);
}
.pevent__venue {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  font-weight: 500;
  color: var(--panel-soft);
}
.icon { flex: none; width: 14px; height: 14px; color: var(--panel-accent); }

.pevent__map {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--panel-accent);
  text-underline-offset: 0.4em;
}

/* ==========================================================================
   4 · CLOSING
   ========================================================================== */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem var(--gutter) calc(7.5rem + env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, var(--c-paper), transparent 75%),
    linear-gradient(to bottom, var(--c-champagne), var(--c-blush));
}
.toran--closing { top: 0; left: 0; right: 0; width: 100%; }

.closing__body { position: relative; z-index: 3; }
.closing__seal { margin: 1.4rem auto 1.8rem; }
/* Family sign-off */
.signoff__regards {
  display: inline-block;
  padding: 0 0.25em;
  font-size: clamp(2.3rem, 11vw, 3.1rem);
  line-height: 1.25;
}
.signoff__family {
  max-width: 20rem;
  margin: 0.2rem auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  text-transform: uppercase;
  color: var(--c-wine);
  text-wrap: balance;
}
.closing__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-wine);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 50px;
  margin-top: 2rem;
  padding: 0.95rem 1.9rem 0.95rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #7d2439, var(--c-wine) 55%, var(--c-wine-deep));
  color: var(--c-gold-light);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--c-gold), 0 10px 22px -8px rgba(83, 22, 38, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.3s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(223, 196, 143, 0.45);
  pointer-events: none;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--c-gold-light), 0 14px 26px -8px rgba(83, 22, 38, 0.6); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 1px solid var(--c-wine); outline-offset: 5px; }

.share-status {
  min-height: 1.4em;
  margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--c-wine);
}

.closing__corner { z-index: 1; }

/* Designer credit: present, but quieter than everything above it */
.credit {
  margin-top: 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
}
.credit::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 auto 1rem;
  background: var(--c-gold);
  transform: rotate(45deg);
}
.credit a {
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--c-wine);
  text-decoration: underline;
  text-decoration-color: var(--c-gold-line);
  text-underline-offset: 0.35em;
  transition: color 0.3s, text-decoration-color 0.3s;
}
.credit a:hover { color: var(--c-gold-deep); text-decoration-color: currentColor; }
.credit a:focus-visible { outline: 1px solid var(--c-wine); outline-offset: 3px; }

.noscript {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  padding: 1rem;
  background: var(--c-wine);
  color: var(--c-paper);
  text-align: center;
}

/* ==========================================================================
   Larger screens
   ========================================================================== */

@media (min-width: 640px) {
  :root { --fs-body: 1.22rem; }
  .hero { padding: 104px 0 48px; }
  .toran { top: 21px; }
}

@media (min-width: 960px) {
  .hero__arch { width: min(calc(100% - 56px), 40rem); }
  .hero__content { padding-top: 6.75rem; }
  .hero .corner { width: 210px; height: 210px; }
  .pevent__name { letter-spacing: 0.06em; padding-left: 0.06em; font-size: 1.3rem; }

  .panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2rem;
    max-width: 68rem;
  }
  .panel { display: flex; flex-direction: column; }
  .panel__inner { flex: 1; }
  .invite__inner { max-width: 34rem; }
}

/* ==========================================================================
   Motion — only when the visitor hasn't asked for less.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Frame and arch lines draw in once the gate parts */
  .js .hero .ln {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.2s var(--ease) 0.9s;
  }
  .js .hero .ln--emerald { transition-delay: 1.1s; }
  .js .hero .ln--fine { transition-delay: 1.3s; }
  .js.is-ready .hero .ln { stroke-dashoffset: 0; }

  .js .hero .arch__fill { opacity: 0; transition: opacity 1.2s ease 0.8s; }
  .js.is-ready .hero .arch__fill { opacity: 1; }

  .js .toran { opacity: 0; transform: translateY(-10px); transition: opacity 1s ease 1.3s, transform 1.4s var(--ease) 1.3s; }
  .js.is-ready .toran { opacity: 1; transform: none; }
  .js .toran--closing { opacity: 1; transform: none; }

  /* Flowers open */
  .js [data-bloom] {
    opacity: 0;
    transition: opacity 1s ease, scale 1.4s var(--ease), rotate 1.4s var(--ease);
    scale: 0.7;
    rotate: -12deg;
  }
  .js .corner[data-bloom] { transition-delay: 1.2s; }
  .js .finial[data-bloom] { transition-delay: 1.5s; }
  .js .names__spray[data-bloom] { transition-delay: 2.35s; }
  .js.is-ready [data-bloom] { opacity: 1; scale: 1; rotate: 0deg; }

  /* Words */
  .js .bismillah,
  .js .hero__divider,
  .js .names__amp > span,
  .js .hero__title,
  .js .hero__dates,
  .js .countdown,
  .js .scroll-cue {
    opacity: 0;
    transition: opacity 1.1s ease, transform 1.2s var(--ease);
  }
  .js .bismillah { transform: translateY(8px); transition-delay: 1.45s; }
  .js .hero__divider { transform: scaleX(0.4); transition-delay: 1.7s; }
  .js .names__amp > span { transition-delay: 2.3s; }
  .js .hero__title { transform: translateY(6px); transition-delay: 2.6s; }
  .js .hero__dates { transform: translateY(6px); transition-delay: 2.75s; }
  .js .countdown { transform: translateY(6px); transition-delay: 2.95s; }
  .js .scroll-cue { transition-delay: 3.2s; }

  /* Script names are "written" left to right */
  .js .names__name {
    clip-path: inset(-30% 100% -30% -10%);
    transition: clip-path 1.6s cubic-bezier(0.55, 0.1, 0.35, 1);
  }
  .js .names__name:first-child { transition-delay: 1.9s; }
  .js .names__name:last-child { transition-delay: 2.45s; }
  .js.is-ready .names__name { clip-path: inset(-30% -10% -30% -10%); }

  .js.is-ready .bismillah,
  .js.is-ready .hero__divider,
  .js.is-ready .names__amp > span,
  .js.is-ready .hero__title,
  .js.is-ready .hero__dates,
  .js.is-ready .countdown,
  .js.is-ready .scroll-cue { opacity: 1; transform: none; }

  /* Each figure settles softly as it changes */
  .countdown__num.is-tick { animation: tick 0.6s var(--ease); }
  @keyframes tick {
    from { opacity: 0.35; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
  }

  .scroll-cue svg { animation: nudge 2.4s ease-in-out 4s infinite; }
  @keyframes nudge { 50% { transform: translateY(4px); } }

  /* Scroll reveals */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1.1s ease, transform 1.2s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .wreath[data-reveal] { transform: scale(0.85) rotate(-25deg); transition-duration: 1.4s; }
  .js .wreath[data-reveal].is-in { transform: none; }

  .js .panel[data-reveal] { transform: translateY(36px); }
  .js .panel[data-reveal] .panel__crest { scale: 0.5; opacity: 0; transition: scale 1.2s var(--ease) 0.4s, opacity 0.8s ease 0.4s; }
  .js .panel[data-reveal].is-in .panel__crest { scale: 1; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}