/* "daniel wilson" at wdth 100 is ~6.4em wide. Size it to the room between the
   reading column's left edge and the right gutter: (50vw + 20rem - 1rem) / 6.6
   on wide screens, (100vw - 3rem - 1rem) / 6.6 on phones. */
.start__name {
  grid-column: col-start / full-end;
  font-size: min(9rem, calc(7.6vw + 2.9rem));
  line-height: 0.95; letter-spacing: -0.02em;
}
@media (max-width: 52rem) { .start__name { font-size: max(2rem, calc(15vw - 10px)); } }
.start__glyphs {
  --wdth: 100;
  position: relative; display: inline-block; white-space: nowrap;
  font-variation-settings: "wdth" var(--wdth);
}
.start__glyphs .g { display: inline-block; }
.start__glyphs .sp { width: 0.28em; }
.start__glyphs .v.is-loose { position: absolute; }
html:not(.motion) .start__glyphs { --wdth: 125; }
/* Hidden until start.js takes over, so there's no flash of the unanimated name. */
html.motion .start__glyphs { visibility: hidden; }
html:not(.motion) .start__glyphs .v,
.start__name.is-done .v { display: none; }
.start__landing::after {
  content: ""; position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--route);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html.motion .start__landing:not(.is-lit)::after { transform: scale(0); }