:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #fafafa;
  color: #1d1d1f;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { width: 100%; height: 100%; overflow: hidden; }
body { width: 100%; height: 100svh; margin: 0; overflow: hidden; position: relative; }

a { color: inherit; text-decoration: none; }
.card {
  position: absolute; left: 50%; top: 50%;
  width: min(960px, calc(100% - 48px)); min-width: 280px;
  transform: translate(-50%, -50%) scale(var(--fit-scale, 1));
  transform-origin: center;
}
.intro { padding: 8px 0 0; text-align: center; }
.monogram {
  display: block;
  width: 76px; height: 76px; margin: 0 auto 32px;
  border-radius: 23px; object-fit: contain;
}
h1 { margin: 0; font-size: clamp(42px, 7vw, 72px); font-weight: 600; letter-spacing: -.065em; line-height: 1.12; }
h2 { margin: 15px 0 26px; font-size: 23px; font-weight: 400; letter-spacing: .16em; color: #6e6e73; }
p { margin: 0; }
.stack { font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: -.025em; }
.role { margin-top: 5px; font-size: 15px; line-height: 1.6; color: #76767c; letter-spacing: -.01em; }
.bio { max-width: 390px; margin: 24px auto 0; font-size: 15px; line-height: 1.9; color: #6e6e73; text-wrap: pretty; }
.links { max-width: 480px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.links a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; font-size: 13px; color: #515154; transition: color .2s ease, background .2s ease; }
.links .contact { grid-column: 1 / -1; justify-self: center; margin-bottom: 12px; width: 174px; min-height: 46px; padding: 0 20px; border-radius: 99px; background: #0071e3; color: white; font-size: 14px; font-weight: 500; white-space: nowrap; }
.links .contact:hover { background: #0077ed; color: white; }
.links a:hover { color: #0071e3; }
.links .featured { position: relative; min-height: 44px; padding: 10px 26px; border: 1px solid #dedee3; border-radius: 12px; background: #fff; color: #1d1d1f; font-size: 15px; font-weight: 600; }
.links .featured:hover { background: #f0f5fc; border-color: #a8c9ef; color: #0071e3; }
.featured .icon { width: 19px; height: 19px; }
.featured span { white-space: nowrap; }
.links a[href^="mailto:"] { order: 1; }
a:focus-visible { outline: 3px solid #0071e3; outline-offset: 5px; border-radius: 4px; }
.icon, .trailing { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trailing { width: 11px; height: 11px; color: #86868b; }
.contact .icon { width: 17px; height: 17px; }
.contact .trailing { display: none; }
footer {
  position: fixed; bottom: 0; left: 0; width: 100%;
  padding: 14px 24px max(14px, env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; line-height: 16px;
  letter-spacing: .02em; color: #86868b; background: #fafafa;
}
footer a { opacity: 0; }
footer:hover a, footer:focus-within a { opacity: 1; }
footer a:hover { color: #1d1d1f; }

@media (max-width: 480px) {
  .monogram { width: 68px; height: 68px; border-radius: 21px; margin-bottom: 30px; }
  h2 { font-size: 20px; margin-top: 14px; }
  .stack { font-size: 18px; }
  .bio { max-width: 290px; font-size: 14px; }
  .links { gap: 10px; }
  .links .featured { padding: 10px 8px; font-size: 13px; }
  .featured .icon { width: 15px; height: 15px; }
  .links a { font-size: 12px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .links a { transition: none; } }

@media (max-height: 700px) {
  .monogram { margin-bottom: 18px; }
  h2 { margin-bottom: 16px; }
  .bio { margin-top: 16px; }
  .links { margin-top: 20px; }
  .links .contact { margin-bottom: 4px; }
}