/* The footer directory: brand lockup on the left, link columns on the right.
   Content sits in the same 1120px lane as the installs grid and the pricing
   cards, so the last block of the page lines up with everything above it. */
:is(.home, .word-page) .footer {
  --footer-label: #8c7e70;
  --footer-link: #463a32;
  --footer-lane: 1120px;

  background: var(--bg);
  border-top: 1px solid var(--landing-line, #d8cec2);
  display: block;
  max-width: none;
  opacity: 1;
  padding: 0;
  text-align: left;
}

:is(.home, .word-page) .footer-directory {
  align-items: flex-start;
  display: flex;
  gap: 80px;
  justify-content: space-between;
  margin: 0 auto;
  /* Reason: the lane is the content width, so the gutters have to be added
     back or the footer sits 32px inside the grid it is meant to line up with. */
  max-width: calc(var(--footer-lane) + 64px);
  padding: 88px 32px 56px;
}

:is(.home, .word-page) .footer-brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 22px;
  max-width: 300px;
}

:is(.home, .word-page) .footer-wordmark {
  align-items: center;
  display: flex;
  gap: 12px;
}

:is(.home, .word-page) .footer-wordmark img {
  height: 44px;
  width: 44px;
}

:is(.home, .word-page) .footer-wordmark span {
  font: 400 30px/34px var(--display);
}

:is(.home, .word-page) .footer-etymology {
  color: var(--landing-muted, #6b5a50);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 8px;
  line-height: 22px;
  max-width: 260px;
}

:is(.home, .word-page) .footer-kanji {
  color: var(--coral);
  font:
    400 20px/26px 'Noto Serif JP',
    serif;
  letter-spacing: 0.06em;
}

:is(.home, .word-page) .footer-columns {
  align-items: flex-start;
  display: flex;
  gap: 64px;
}

:is(.home, .word-page) .footer-column h2 {
  color: var(--footer-label);
  font: 600 var(--type-label, 12px) / 16px var(--body);
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(.home, .word-page) .footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

:is(.home, .word-page) .footer-column li {
  align-items: center;
  display: flex;
  gap: 8px;
}

:is(.home, .word-page) .footer-column a {
  color: var(--footer-link);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
}

:is(.home, .word-page) .footer-column a:hover {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reason: --coral on a 10px label is too light to read, so the badge borrows
   the deeper coral the page already uses for link hovers. */
:is(.home, .word-page) .footer-badge {
  background: var(--coral-wash);
  border-radius: 4px;
  color: var(--coral);
  font: 600 10px/14px var(--body);
  letter-spacing: 0.1em;
  padding: 2px 6px;
  text-transform: uppercase;
}

/* The rule runs the full width while the copyright stays in the lane. */
:is(.home, .word-page) .footer-baseline {
  border-top: 1px solid var(--landing-line, #d8cec2);
}

:is(.home, .word-page) .footer-baseline p {
  color: var(--landing-muted, #6b5a50);
  font-size: 13px;
  line-height: 20px;
  margin: 0 auto;
  max-width: calc(var(--footer-lane) + 64px);
  padding: 28px 32px 44px;
}

@media (max-width: 1200px) {
  :is(.home, .word-page) .footer-directory {
    flex-direction: column;
    gap: 48px;
    padding: 64px 24px 44px;
  }
  :is(.home, .word-page) .footer-columns {
    column-gap: 48px;
    flex-wrap: wrap;
    row-gap: 40px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  :is(.home, .word-page) .footer-directory {
    gap: 40px;
    padding: 56px 24px 38px;
  }
  :is(.home, .word-page) .footer-brand {
    gap: 18px;
  }
  :is(.home, .word-page) .footer-wordmark img {
    height: 38px;
    width: 38px;
  }
  :is(.home, .word-page) .footer-wordmark span {
    font-size: 26px;
    line-height: 30px;
  }
  :is(.home, .word-page) .footer-kanji {
    font-size: 18px;
    line-height: 24px;
  }
  :is(.home, .word-page) .footer-etymology {
    max-width: none;
  }
  /* Apps is twice as long as the other three put together, so it takes a lane
     of its own rather than leaving a hole under a two-item neighbour. */
  :is(.home, .word-page) .footer-columns {
    column-gap: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  :is(.home, .word-page) .footer-column:first-child {
    grid-row: span 3;
  }
  /* "Public Dictionary" is wider than a grid column on a 320px phone, so the
     heading wraps here rather than pushing the page into a sideways scroll. */
  :is(.home, .word-page) .footer-column h2 {
    margin-bottom: 16px;
    white-space: normal;
  }
  /* Roomier rows so each link clears a comfortable touch target. */
  :is(.home, .word-page) .footer-column ul {
    gap: 20px;
  }
  /* The grid fixes the column width, so a long name has to be allowed to wrap
     instead of running into its neighbour on a 320px-wide phone. */
  :is(.home, .word-page) .footer-column a {
    white-space: normal;
  }
  :is(.home, .word-page) .footer-baseline p {
    padding: 24px 24px 40px;
  }
}