@font-face {
  font-family: 'Source Sans';
  src: url('source-sans-light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
* { box-sizing: border-box; }
html { color-scheme: light; background: #fff; }
body { margin: 0; color: #303030; font-family: 'Source Sans', 'Helvetica Neue', sans-serif; font-weight: 300; }
.card {
  min-height: 100svh;
  padding: clamp(28px, 6vw, 96px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 48px 32px;
  font-size: clamp(24px, 3.1vw, 48px);
  line-height: 1.25;
}
h1, p { margin: 0; font: inherit; }
h1 { grid-area: 1 / 1; }
.occupation { grid-area: 1 / 2; text-align: right; max-width: 15em; justify-self: end; }
address { grid-area: 3 / 1; font: inherit; display: flex; flex-direction: column; align-items: flex-start; }
nav { grid-area: 3 / 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
a { color: inherit; text-decoration: none; text-underline-offset: .15em; padding-block: .07em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
@media (max-width: 640px) {
  .card { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(100px,1fr) auto auto; gap: 20px; font-size: clamp(24px, 5.9vw, 34px); }
  h1 { grid-area: 1 / 1; }
  .occupation { grid-area: 2 / 1; text-align: left; justify-self: start; }
  address { grid-area: 4 / 1; }
  nav { grid-area: 5 / 1; flex-direction: row; justify-content: flex-start; gap: 24px; font-size: .8em; }
}