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

html { -webkit-text-size-adjust: 100%; --home-logo-top: clamp(64px, 10vw, 144px); }

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 { min-height: 100%; overflow-x: clip; overflow-y: auto; }
body { min-height: 100svh; height: auto; }
.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: var(--home-logo-top);
  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: calc(1.05em * 623 / 910); flex-shrink: 0; }
/* 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(42px, 9vh, 108px);
}
.ways a, .ways [aria-disabled="true"] {
  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; }

.ways [aria-disabled="true"] {
  opacity: .4;
  cursor: default;
}
.ways a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

/* Keep the menu and subscription separate on short screens. */
@media (max-height: 650px) {
  .tagline { margin-top: 22px; }
  .ways { margin-top: 40px; gap: 6px; }
}
@media (max-height: 420px) {
  .tagline { margin-top: 16px; }
  .ways { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
}

/* Real outline lettering, rendered by the browser at the device resolution. */
.tagline { font: 400 clamp(25px, 2.4vw, 34px)/1.35 var(--font-accent); }
.tagline span { display: block; }
.in-water .tagline { color: #1c1c1c; }