*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

/* Landing: one screen */
html, body { height: 100%; overflow: hidden; }
.descent { height: 100%; position: relative; }
.descent-stage {
  position: relative;
  touch-action: none; /* a finger drag moves the water instead of the page */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}
.descent-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.descent-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(40px, 17vh, 210px);
  padding-bottom: 130px;              /* keeps clear of the subscribe line */
  text-align: center;
  overflow: hidden;
  color: #000;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.28em;
  margin: 0;
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand .mark { height: 1.05em; width: auto; }
/* Drawn inside the water by descent.js; the HTML copy stays for layout and selection. */
.in-water .brand { color: transparent; }
.in-water .mark { visibility: hidden; }
.tagline { margin: clamp(26px, 4.2vw, 72px) 0 0; line-height: 0; }
.tagline img { width: clamp(250px, 21vw, 340px); height: auto; }
.in-water .tagline img { visibility: hidden; }

/* ?card: layout used to render the link-preview image (og.png). */
.card .descent-intro { justify-content: center; padding-top: 0; padding-bottom: 2vh; }

.bare .descent-intro, .bare .join { display: none; }

/* A short list under the motto, like a menu carved below the name. */
.ways {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.1vh, 14px);
  margin-top: clamp(26px, 7vh, 88px);
}
.ways a {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 17px);
  letter-spacing: 0.01em;
  color: rgba(20, 18, 15, 0.62);
  text-decoration: none;
  transition: color .2s;
}
.ways a:hover, .ways a:focus-visible { color: #14120f; }
.card .ways, .bare .ways { display: none; }