:root{
  --color-bg:             #fbfbfd;
  --color-text-primary:   #1d1d1f;   
  --color-text-secondary: #515154;   
  --color-action:         #0066cc;   

  --font-display: "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text",    -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  background:var(--color-bg); color:var(--color-text-primary);
  font-family:var(--font-text); font-size:17px; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--color-action); outline-offset:3px; border-radius:4px; }

.page{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:80px 24px;
}
.card{ width:100%; max-width:440px; }

.name{
  font-family:var(--font-display);
  font-size:clamp(32px, 6vw, 44px);
  font-weight:600; line-height:1.06; letter-spacing:-.02em;
}
.line{
  margin-top:12px;
  font-size:17px; color:var(--color-text-secondary);
  letter-spacing:-.01em;
}

.line--after{ margin-top:22px; }

.line a{
  color:var(--color-action);
  text-decoration:underline;
  text-decoration-color:rgba(0,102,204,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .15s;
}
.line a:hover{ text-decoration-color:var(--color-action); }

@media (max-width:600px){
  .page{ align-items:flex-start; padding:88px 22px 56px; }
}