.hero .hero-copy,
.hero .hero-copy * {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.hero h1 {
  font-size: clamp(44px, calc(5 * var(--layout-vw, 1vw)), 68px);
  line-height: 1.05;
  letter-spacing: -.055em;
  font-weight: 700;
  white-space: nowrap;
}
.button.primary span { color: #fff; letter-spacing: .12em; }
.button.primary span { margin-left: 4px; letter-spacing: 0; }
:root { --paper: #ffffff; --line: #dddddd; }
.nav { margin-left: auto; }
.nav a { font-size: 11px; }
body,
.topbar,
.section.alt,
.life-section { background: #ffffff; }
.section.alt { color: var(--ink); }
.hero-photo {
  width: 100%;
  max-width: 480px;
  justify-self: end;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
@media (max-width: 780px) {
  .hero h1 { white-space: normal; }
  .hero-photo { max-width: none; margin-top: 40px; }
}

.button.primary { font-size: 14px; }

.hero-actions .button.primary { font-size: 16px !important; }

.hero-photo img {
  border-radius: 12px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, rgba(0,0,0,.92) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 62%, rgba(0,0,0,.92) 82%, transparent 100%);
  filter: drop-shadow(0 18px 26px rgba(55, 42, 65, .12));
}

.hero-photo img {
  -webkit-mask-image: none;
  mask-image: none;
  border: 8px solid rgba(255, 255, 255, .58);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 18px 26px rgba(55, 42, 65, .12);
}