/* korriwan.com: the footer of the coming-soon page: the credits, and the way to the page in the other
   language. */
@layer page {
  /* the footer: a bar of frosted glass across the foot of the page, holding the credits and the language link */
  .foot {
    position: relative;
    flex: none;
    border-top: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--sheen);
  }
  .foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: first baseline;
    gap: 2px 28px;
    padding-block: 13px 18px;
    font-size: 13px;
    color: var(--ink-2);
  }
  .foot-row h2 {
    --lh: 1.2;
    --extra: .8;
    font: 500 1.125rem var(--display);
    color: var(--ink);
  }
  .foot-row p {
    --lh: 1.45;
    --extra: .92;
  }
  .foot-row a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  /* the language link is first in the markup and last in the bar, at its right end */
  .language {
    order: 1;
    margin-left: auto;
  }
  /* on a narrow screen (under 700px, where the script also calls the clearing narrow) the credits take
     less of the page: smaller type, tighter gaps and padding, and less room under each line for its vine */
  @media (max-width: 699px) {
    .foot-row {
      gap: 0 16px;
      padding-block: 9px 12px;
      font-size: 12px;
    }
    .foot-row h2 { font: 500 1rem var(--display); }
    .foot-row h2, .foot-row p { --extra: .7; }
  }
  /* Under 560px the bar cannot hold everything in one line. There the first credit shares the first line with
     the language link, and every credit after it takes a line of its own beneath, so that the bar is two lines
     tall on every phone and the link keeps to its corner. */
  @media (max-width: 559px) {
    .foot-row h2 + p ~ p {
      order: 2;
      flex-basis: 100%;
    }
  }
}