/* Welcome: blessing, names, dates and the couple folding hands in namaste */
.welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: clamp(110px, 15vh, 150px) 24px 0;
  text-align: center;
}

.welcome__text { max-width: 560px; }

.welcome__blessing {
  margin: 0 0 1.2em;
  font-family: var(--font-deva);
  font-size: clamp(18px, 2.4vmin + 6px, 28px);
  color: #96601e;
}

.welcome__line {
  margin: 0.4em 0;
  font-size: clamp(15px, 1.4vmin + 9px, 22px);
}

.welcome__names {
  margin: 0.3em 0 0.5em;
  font-weight: 400;
  line-height: 1;
}

.welcome__name {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(54px, 6.5vmin + 22px, 96px);
  color: var(--gold);
  padding: 0.08em 0.3em;
  line-height: 1.15;
}

.welcome__amp {
  display: block;
  margin: 0.15em 0;
  font-size: clamp(22px, 2vmin + 12px, 34px);
  color: var(--rose);
}


/* the couple takes whatever height is left on the screen below the text */
.welcome__couple {
  min-height: 0;
  height: 100%;
  padding: 1.5svh 0 clamp(36px, 6svh, 70px);
}

.welcome__video { height: 100%; width: auto; }

/* Desktop: text on the left, couple on the right */
@media (min-aspect-ratio: 1/1) {
  .welcome {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    padding: clamp(120px, 15vh, 160px) 6vw clamp(30px, 5vh, 60px);
  }
  .welcome__couple {
    width: auto;
    height: 74vh;
    align-self: center;
    margin: 4vh 0 0;
  }
  .welcome__video { height: 100%; width: auto; }
}

/* Initial states before the entrance animation */
[data-reveal], [data-write] { opacity: 0; }

/* Ganesha at the head of the invitation, hosts and lineage lines */
.welcome__ganesha {
  width: clamp(56px, 6vmin + 26px, 92px);
  height: auto;
  margin: 0 auto 0.3em;
}

.welcome__title {
  font-family: var(--font-serif);
  font-size: 0.24em;
  letter-spacing: 0.04em;
  color: var(--rose);
  margin-right: 0.35em;
  vertical-align: 0.9em;
}

.welcome__hosts {
  margin: 0.2em 0 0.1em;
  font-size: clamp(17px, 1.5vmin + 11px, 25px);
  font-weight: 500;
  color: var(--rose);
}

.welcome__lineage {
  display: block;
  margin: 0.2em 0 0.3em;
  font-family: var(--font-serif);
  font-size: clamp(13px, 0.9vmin + 9px, 17px);
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
}

/* Portrait phones/tablets: the text also scales with the screen HEIGHT, so a short phone (e.g. iPhone SE)
   gets the same layout as a 390x844 phone, just smaller, and the couple keeps its share of the screen.
   --h = height available below the garland; each size = its 390x844 value / 734px x --h (never larger than before). */
@media (max-aspect-ratio: 1/1) {
  .welcome { --h: calc((100svh - 135px) * var(--ws, 1)); }   /* 110px garland + ~25px for the scroll hint row; --ws: set by fitWelcome() */
  .welcome__ganesha { width: min(clamp(56px, 6vmin + 26px, 92px), calc(var(--h) * 0.0763)); }
  .welcome__blessing { font-size: max(11px, min(clamp(18px, 2.4vmin + 6px, 28px), calc(var(--h) * 0.0245))); }
  .welcome__hosts { font-size: max(12px, min(clamp(17px, 1.5vmin + 11px, 25px), calc(var(--h) * 0.0232))); }
  .welcome__line { font-size: max(11px, min(clamp(15px, 1.4vmin + 9px, 22px), calc(var(--h) * 0.0204))); }
  .welcome__name { font-size: min(clamp(54px, 6.5vmin + 22px, 96px), calc(var(--h) * 0.0736)); }
  .welcome__lineage { font-size: max(11px, min(clamp(13px, 0.9vmin + 9px, 17px), calc(var(--h) * 0.0177))); }
  .welcome__amp { font-size: max(13px, min(clamp(22px, 2vmin + 12px, 34px), calc(var(--h) * 0.03))); }
}

/* bride's place (R/O ...) and the family residence under the names */
.welcome__from { margin-top: -0.1em; font-style: normal; }
.welcome__residence {
  margin: 0.9em auto 0;
  max-width: 30em;
  font-size: clamp(12px, 0.9vmin + 8px, 16px);
  line-height: 1.4;
  color: var(--ink);
}
@media (max-aspect-ratio: 1/1) {
  .welcome__residence { font-size: max(11px, min(clamp(12px, 0.9vmin + 8px, 16px), calc(var(--h) * 0.0168))); }
}

/* lineage lines ("Son of…", "Daughter of…"): a touch smaller, tucked up under the script names */
.welcome__lineage { font-size: clamp(12px, 0.8vmin + 8.5px, 15.5px); margin-top: -0.55em; }
/* bride's place "(r/o …)": same italic as the lineage line, smaller, right under it */
.welcome__lineage.welcome__from { font-style: italic; font-size: clamp(10.5px, 0.65vmin + 7.5px, 13.5px); margin-top: -0.15em; }
@media (max-aspect-ratio: 1/1) {
  .welcome__lineage { font-size: max(11px, min(clamp(12px, 0.8vmin + 8.5px, 15.5px), calc(var(--h) * 0.016))); }
  .welcome__lineage.welcome__from { font-size: max(10.5px, min(clamp(10.5px, 0.65vmin + 7.5px, 13.5px), calc(var(--h) * 0.014))); }
}

/* residence line: close to the size of the "request the pleasure…" line (about 90% of it) */
.welcome__residence { font-size: clamp(14px, 1.25vmin + 8px, 20px); }
@media (max-aspect-ratio: 1/1) {
  .welcome__residence { font-size: max(11px, min(clamp(14px, 1.25vmin + 8px, 20px), calc(var(--h) * 0.0185))); }
}

/* long lineage lines (e.g. the bride's grandparents) wrap into two even lines instead of leaving one word alone */
.welcome__lineage { text-wrap: balance; }
/* bride card: a little room between the two-line grandparents line and "with" */
.is-bride .welcome__amp { margin-top: 0.35em; }

/* ---------- "scroll for more" row: reserved space below the couple, so the hint never covers anything ---------- */
.welcome { grid-template-rows: auto minmax(0, 1fr) auto; }
.welcome__couple { padding-bottom: 0.6svh; }
.welcome > .scroll-cue { margin-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }   /* clears the language pill row */
@media (min-aspect-ratio: 1/1) {
  .welcome { grid-template-rows: minmax(0, 1fr) auto; }
  .welcome__text { grid-column: 1; grid-row: 1 / span 2; }
  .welcome__couple { grid-column: 2; grid-row: 1; height: min(66vh, 100%); margin-top: 2vh; }
  .welcome > .scroll-cue { grid-column: 2; grid-row: 2; margin-bottom: 0; }
}