/*
 * Home page names: "ALEKHYA & SUPRAJITH" in Cormorant Garamond capitals, with
 * large decorative Cinzel Decorative initials and a deep brown-to-gold fill.
 * Phone sizes are set in home-phone.css.
 */

/* Show Alekhya first. The compiled markup is name1 (Suprajith), "&", name2
   (Alekhya), stacked in a flex column. */
#home h1 > span:nth-child(3) { order: 1; }
#home h1 > span:nth-child(2) { order: 2; }
#home h1 > span:nth-child(1) { order: 3; }

#home h1 > span:nth-child(1),
#home h1 > span:nth-child(3) {
  /* The gradient fill only paints inside the box, and the swash A and the
     J's tail reach outside the line, so pad the box to cover them and cancel
     the padding with negative margins to keep the layout unchanged. */
  padding: 0.25em 0.3em 0.4em;
  margin: -0.25em -0.3em -0.4em;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: min(4.75rem, calc((100vw - 2.5rem) / 5.7));
  letter-spacing: 0.01em;
  line-height: 0.92;
  background-image: linear-gradient(180deg, #4e2c0b 0%, #8a5a22 42%, #b8873d 60%, #5a3510 100%);
}

#home h1 > span:nth-child(1)::first-letter,
#home h1 > span:nth-child(3)::first-letter {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-size: 1.45em;
}

#home h1 > span:nth-child(2) {
  margin: -0.02em 0 0.04em;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: min(3.75rem, calc((100vw - 2.5rem) / 7.2));
  line-height: 0.75;
  color: #a87a35;
}

/* Lower the names by 2cm, and the date, countdown and "Our Story" button by
   2.5cm, without changing anything else's position. */
#home > .z-10 > h1 {
  position: relative;
  top: 2cm;
}
#home > .z-10 > h1 + div,
#home > .z-10 > h1 + div + div,
#home > .z-10 > a {
  position: relative;
  top: 2.5cm;
}