/* Every proportion comes from the golden ratio, phi = 1.618:
   1/phi = 61.8% and 1/phi^2 = 38.2%. */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #000;
  /* The glow above the horizon fades out at the golden section of the
     sky: 61.8% + 38.2% x 38.2% = 76.4% from the bottom. */
  background: linear-gradient(0deg, #000 61.8%, #1f2124 61.8%, #000 76.4%);
  color: #c0c0c0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The horizon cuts the height at the golden section: 38.2% from the top,
   61.8% from the bottom. The word stands on it, its reflection lies on
   the floor below and the footer rests at the bottom. */
#app {
  --horizon: 38.2%;
  display: grid;
  grid-template-rows: var(--horizon) 1fr auto;
  height: 100%;
}

.stage {
  display: grid;
  justify-items: center;
  align-items: end;
}

.site-title {
  position: relative;
  margin: 0;
  /* Letters spaced 1/phi^2 of the size apart; the word then spans about
     6em, so 10.3vw makes it 61.8% of the screen width. */
  --tracking: 0.382em;
  font-size: clamp(2.5rem, 10.3vw, 10rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking);
  /* The letter spacing also follows the last letter: shift it back so the
     word sits truly centred. */
  margin-right: calc(-1 * var(--tracking));
  /* Space under the baseline; capitals have no descenders. Dropping it lets
     the letters touch the horizon. Tune this one value: the word and its
     reflection both follow it. */
  --baseline-gap: 0.125em;
  margin-bottom: calc(-1 * var(--baseline-gap));
}

/* The reflection: the same word flipped, fading into the floor. The "/ ''"
   alt text keeps screen readers from reading it twice. */
.site-title::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 100% 0 auto;
  /* Mirror on the baseline: the flip doubles the gap, so pull it in twice. */
  margin-top: calc(-2 * var(--baseline-gap));
  transform: scaleY(-1);
  /* Faint at 38.2%, and it fades away over 61.8% of its height. */
  opacity: 0.382;
  filter: blur(1px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 38.2%, #000);
  mask-image: linear-gradient(to bottom, transparent 38.2%, #000);
}

/* A longer name: letters 1/phi^3 apart, and a size that keeps the word
   near 61.8% of the screen width (about 13.7em wide). */
.site-title--long {
  --tracking: 0.236em;
  font-size: clamp(1.25rem, 4.5vw, 4.5rem);
}

/* An app page's links rest on the floor, past the reflection. */
.app-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 6rem 1rem 0;
}

.store-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid #555;
  border-radius: 2rem;
  color: #c0c0c0;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.store-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.store-button:hover,
.store-button:focus-visible {
  border-color: #c0c0c0;
  color: #fff;
}

.quiet-link {
  /* Same quiet grey as the footer, about 4.7:1 on black. */
  color: #777;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.quiet-link:hover,
.quiet-link:focus-visible {
  color: #c0c0c0;
}

/* The apps index: a quiet box on the floor, past the reflection. */
.app-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6rem 1rem 0;
}

/* A golden rectangle: as tall as 1/phi of its width. A longer list grows
   past it instead of overflowing. */
.app-list ul {
  box-sizing: border-box;
  width: min(100%, 20rem);
  aspect-ratio: 1.618 / 1;
  margin: 0;
  padding: 0.5rem 0;
  border: 1px solid #333;
  border-radius: 0.75rem;
  list-style: none;
}

.app-list a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #c0c0c0;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.app-list a:hover,
.app-list a:focus-visible {
  color: #fff;
}

.site-footer {
  grid-row: 3;
  padding: 1rem;
  text-align: center;
  /* Quiet, yet still readable: about 4.7:1 on black. */
  color: #777;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}