/* Letters within reach: a dark closing section that slides away, and under it a sand footer with a motto
   as wide as the screen. The letters of the motto are spans: they rise into place as the footer opens,
   then each one follows the pointer up or down and takes a colour of its own. */
:root {
  --night: #1f2a22;        /* the closing section */
  --cream: #f1e9da;        /* its text */
  --sand: #e8dcc6;         /* the footer */
  --ink: #231f1a;          /* the footer's text and the motto */
  --edge: clamp(18px, 3.4vw, 52px);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--sand);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Familjen Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------- the closing section */
.closing {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 118vh;
  min-height: 118svh;
  padding: var(--edge);
  background: var(--night);
  color: var(--cream);
  border-radius: 0 0 clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 36px);
}

.closing__inner {
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2vw, 28px);
  max-width: 1100px;
}

.closing__brand {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.closing__title {
  margin: 0;
  font-size: clamp(38px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.closing__line {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
  opacity: 0.8;
}

.closing__button {
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--night);
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@media (hover: hover) {
  .closing__button:hover {
    transform: scale(1.05);
  }
}

.closing__hint {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  margin: 0;
  font-size: 14px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------- the footer */
.mask {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.foot {
  display: flex;
  flex-direction: column;
  min-height: 86vh;
  min-height: 86svh;
  padding: calc(var(--edge) + 12px) var(--edge) 18px;
  background: var(--sand);
}

/* while the reveal runs the footer is pinned to the top of its mask and pushed up by script.js */
.foot.is-revealing {
  position: absolute;
  inset: 0 0 auto;
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
}

.foot__lead {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(26px, 2.8vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  font-size: 15px;
}

.foot__cols div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.foot__head {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.55;
}

.foot__cols a,
.foot__top-link {
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .foot__cols a:hover,
  .foot__top-link:hover {
    opacity: 0.5;
  }
}

/* ---------------------------------------------------------------- the motto */
.slogan {
  position: relative;
  margin: auto 0 0;
  padding: 0.04em 0 0.22em;        /* room under the line for the tails of g, p and y */
  font-size: 20vw;                 /* script.js fits it to the width */
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  white-space: nowrap;
  overflow: hidden;                /* the letters rise out of the line: it hides them until the footer opens */
  touch-action: none;              /* a finger on the motto plays with the letters instead of scrolling */
  user-select: none;
  -webkit-user-select: none;
}

/* open: the letters may leave the line to reach the pointer */
.slogan.is-open {
  overflow: visible;
}

.letter,
.letter__in {
  display: inline-block;
  will-change: transform;
}

.letter--space {
  display: inline-block;
  width: 0.24em;
}

.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  font-size: 13px;
}

.foot__bottom p {
  margin: 0;
  opacity: 0.6;
}

.foot__top-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.foot__top-link:focus-visible,
.closing__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  .foot__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .foot__cols {
    gap: 14px;
    font-size: 14px;
  }

  .foot {
    min-height: 74svh;
  }
}