/*
 * Home page layout for phones (portrait screens narrower than 768px).
 * Desktop and tablet layouts are untouched.
 *
 * Supporting elements are sized for a 390px-wide screen and scale in
 * proportion: --u is one "390px design pixel" at the current screen width.
 */
@media (max-width: 767px) and (orientation: portrait) {
  #home {
    --u: calc(100vw / 390);
    /* Space taken by the date, countdown and button below the names:
       24 + 12 (date) + 24 + 46 (cards) + 24 + 36 (button). */
    --group: calc(var(--u) * 166);

    /* Show the glowing cross at about 80% of the screen width. The picture
       fills the screen height; the cross is 72.97% across the picture, whose
       width is 1.7768 times its height. */
    background-size: auto 100%;
    background-position: calc(80vw - 129.65vh) 50%;
    background-position: calc(80vw - 129.65svh) 50%;
  }

  /* Full-screen column: the names sit in the vertical middle, with the date,
     countdown and button directly below them. The names' top margin equals
     the height of that group, which keeps the names themselves centred. */
  #home > .z-10 {
    position: absolute;
    inset: 0;
    justify-content: center;
    padding: 0 20px;
  }

  /* Verse: near the top, just under the header. */
  #home > .z-10 > p:first-child {
    position: absolute;
    top: 88px;
    left: 20px;
    right: 20px;
    max-width: none;
  }

  /* Verse a little smaller on phones (was 20px, reference 18px). */
  #home > .z-10 > p:first-child > span:first-child {
    font-size: 17px;
  }
  #home > .z-10 > p:first-child > span:last-child {
    font-size: 15px;
  }

  /* Names: 11% of the screen width, each on one line; "&" scaled to match. */
  #home > .z-10 > h1 {
    margin-top: var(--group);
  }

  #home > .z-10 > h1 > span:nth-child(1),
  #home > .z-10 > h1 > span:nth-child(3) {
    font-size: 11vw;
  }

  #home > .z-10 > h1 > span:nth-child(2) {
    font-size: 9.5vw;
    margin: 0;
  }

  /* Date: 12px text with a 40px line on each side. */
  #home > .z-10 > h1 + div {
    margin-top: calc(var(--u) * 24);
  }

  #home > .z-10 > h1 + div > span {
    width: calc(var(--u) * 40);
  }

  #home > .z-10 > h1 + div > p {
    margin: 0 calc(var(--u) * 12);
    font-size: calc(var(--u) * 12);
  }

  /* Countdown: 50 x 46px cards, 8px apart, 18px numbers. */
  #home > .z-10 > h1 + div + div {
    margin-top: calc(var(--u) * 24);
  }

  #home > .z-10 > h1 + div + div > ul {
    gap: calc(var(--u) * 8);
  }

  #home > .z-10 > h1 + div + div li {
    width: calc(var(--u) * 50);
    height: calc(var(--u) * 46);
    padding-top: calc(var(--u) * 9);
    border-radius: calc(var(--u) * 25) calc(var(--u) * 25) calc(var(--u) * 5) calc(var(--u) * 5);
  }

  #home > .z-10 > h1 + div + div li > span:first-child {
    font-size: calc(var(--u) * 18);
  }

  /* Labels: as small as stays readable, never below 7px. */
  #home > .z-10 > h1 + div + div li > span:nth-child(2) {
    margin-top: calc(var(--u) * 3);
    font-size: max(7px, calc(var(--u) * 7));
    letter-spacing: 0.04em;
  }

  #home > .z-10 > h1 + div + div li > svg {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
    bottom: calc(var(--u) * -7);
  }

  #home > .z-10 > h1 + div + div li:nth-child(-n + 2) > svg {
    left: calc(var(--u) * -9);
  }

  #home > .z-10 > h1 + div + div li:nth-child(n + 3) > svg {
    right: calc(var(--u) * -9);
  }

  /* "Our Story" button: 145 x 36px with 10px text, and an invisible tap
     area at least 44px tall around it. */
  #home > .z-10 > a {
    margin-top: calc(var(--u) * 24);
    width: calc(var(--u) * 145);
    height: calc(var(--u) * 36);
    gap: calc(var(--u) * 10);
    font-size: calc(var(--u) * 10);
  }

  #home > .z-10 > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(44px, 100%);
    transform: translateY(-50%);
  }

  #home > .z-10 > a > svg:first-of-type {
    width: calc(var(--u) * 12);
    height: calc(var(--u) * 6.5);
    margin-top: calc(var(--u) * 2);
  }

  #home > .z-10 > a > svg:last-of-type {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
    top: calc(var(--u) * -7);
    right: calc(var(--u) * -8);
  }

  /* Soft pale glow behind the names, light enough for the cross to show
     through, plus a fainter wash behind the date, countdown and button. */
  #home > .z-10::before {
    top: 0;
    bottom: 0;
    width: 100%;
    background:
      radial-gradient(
        closest-side,
        rgba(255, 249, 236, 0.5) 0%,
        rgba(255, 249, 236, 0.3) 50%,
        rgba(255, 249, 236, 0) 100%
      ),
      radial-gradient(
        closest-side,
        rgba(255, 249, 236, 0.3) 0%,
        rgba(255, 249, 236, 0.18) 55%,
        rgba(255, 249, 236, 0) 100%
      );
    background-size: 100% 24%, 92% 46%;
    background-position: 50% 50%, 50% 62%;
    background-repeat: no-repeat;
  }

  /* Phones: the names, date and countdown sit 3.7cm higher than the desktop
     offsets in home-names.css (names 2cm, date and countdown 2.5cm); the
     button keeps its 2.5cm offset. The glow follows the names. */
  #home > .z-10 > h1 {
    top: -1.7cm;
  }
  #home > .z-10 > h1 + div,
  #home > .z-10 > h1 + div + div {
    top: -1.2cm;
  }
  #home > .z-10::before {
    transform: translate(-50%, -1.7cm);
  }
}