/* Footer: a lilac dome that closes every page. Its top is half an ellipse, like the edge of the hill
   in the homepage hero seen from the side, with two contour lines along it and the eagle on top.
   motion.js lets it rise as it comes in and the big name rise out of the bottom edge; this file is
   the resting state. */

/* The site's third colour, next to butter yellow (#feeb8d) and graphite (#252324): lilac. Every page
   loads this file; change the colour here and everything made of it follows (the footer, the disc in
   the homepage hero, the dots on the homepage's steps). */
:root {
  --third: #c9b6f5;
}

.ft {
  position: relative;
  padding: 0 16px 16px;
}

.ft__card {
  /* how high the dome rises above the straight sides */
  --dome: clamp(110px, 20vw, 380px);
  position: relative;
  overflow: hidden;
  border-radius: 50% 50% 40px 40px / var(--dome) var(--dome) 40px 40px;
  background: var(--third);
  color: #252324;
  padding: calc(var(--dome) * 0.5 + 24px) 40px 0;
  text-align: center;
}

/* two contour lines along the top, as on a map */
.ft__card::before,
.ft__card::after {
  content: '';
  position: absolute;
  left: var(--in);
  right: var(--in);
  top: var(--in);
  height: calc((var(--dome) - var(--in)) * 2);
  border: 1.5px solid rgba(37, 35, 36, 0.14);
  border-radius: 50%;
  /* only the upper half: the lower half would cross the card */
  clip-path: inset(0 0 50% 0);
  pointer-events: none;
}

.ft__card::before {
  --in: 22px;
}

.ft__card::after {
  --in: 46px;
  border-color: rgba(37, 35, 36, 0.08);
}

/* ------------------------------------------------------------ top: call to action and links */

.ft__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ft__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ft__bird {
  display: block;
  width: clamp(44px, 4vw, 64px);
  height: auto;
  aspect-ratio: 833 / 873;
  margin-bottom: clamp(24px, 3vw, 40px);
  color: #252324;
}

.ft__title {
  margin: 0;
  font-size: clamp(40px, 5.8vw, 112px);
  font-weight: 550;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.ft__title > span {
  display: block;
  text-wrap: balance;
}

.ft__dim {
  color: rgba(37, 35, 36, 0.5);
}

.ft__text {
  margin: 32px 0 0;
  max-width: 24em;
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: rgba(37, 35, 36, 0.72);
}

.ft__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin-top: 36px;
  padding: 0 28px;
  border-radius: 999px;
  background: #feeb8d;
  color: #252324;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, scale 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ft__cta:hover {
  background: #252324;
  color: #fffce1;
  scale: 1.04;
}

.ft__cta:focus-visible {
  outline: 2px solid #252324;
  outline-offset: 3px;
}

.ft__cols {
  display: flex;
  justify-content: center;
  gap: clamp(64px, 12vw, 220px);
  margin-top: clamp(64px, 7vw, 112px);
  text-align: left;
}

.ft__head {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.025em;
  color: rgba(37, 35, 36, 0.55);
}

.ft__col ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft__col a {
  color: #252324;
  font-size: 20px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.ft__col a:hover {
  opacity: 0.6;
}

.ft__col a:focus-visible,
.ft__up:focus-visible {
  outline: 2px solid #252324;
  outline-offset: 4px;
  border-radius: 4px;
}

.ft__line {
  position: relative;
  height: 1px;
  margin-top: 72px;
  background: rgba(37, 35, 36, 0.16);
}

/* ------------------------------------------------------------ bottom: the name and the small print */

.ft__bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  text-align: left;
}

/* the name stands on the bottom edge of the card: with this line height its baseline is the
   bottom of the box. Tone on tone, a little darker than the lilac. */
.ft__mark {
  margin: 0 0 0 -0.045em;
  font-size: clamp(120px, 26vw, 480px);
  font-weight: 600;
  line-height: 0.668;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: rgba(37, 35, 36, 0.09);
  user-select: none;
}

.ft__meta {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 32px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.ft__copy {
  margin: 0;
  color: rgba(37, 35, 36, 0.6);
}

.ft__up {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #252324;
  text-decoration: none;
}

.ft__ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 35, 36, 0.6);
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ft__up:hover .ft__ic {
  background: #252324;
  border-color: #252324;
  color: #fffce1;
}

.ft__ic svg {
  transition: translate 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ft__up:hover .ft__ic svg {
  translate: 0 -2px;
}

/* ------------------------------------------------------------ narrower */

/* the copyright carries the full name: where it and "Back to top" do not fit next to the big name,
   they stand under each other */
@media (max-width: 1000px) {
  .ft__meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .ft__card {
    --dome: 96px;
    padding: 84px 24px 0;
  }

  .ft__card::before {
    --in: 14px;
  }

  .ft__card::after {
    --in: 30px;
  }

  .ft__title {
    font-size: 40px;
  }

  .ft__text {
    font-size: 18px;
  }

  .ft__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    width: 100%;
    margin-top: 64px;
  }

  .ft__col a {
    font-size: 18px;
    white-space: normal;
  }

  .ft__line {
    margin-top: 64px;
  }

  .ft__bottom {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 28px;
    margin-top: 28px;
  }

  .ft__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding-bottom: 0;
  }

  .ft__copy {
    white-space: normal;
  }

  .ft__up {
    margin-left: auto;
  }

  .ft__mark {
    font-size: 39vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft__cta,
  .ft__ic,
  .ft__ic svg {
    transition: none;
  }

  .ft__cta:hover {
    scale: none;
  }
}