@import url(https://fonts.googleapis.com/css?family=Cormorant+Garamond:700|Nunito+Sans:200,400);

:root {
  --paper: #fdfdfb;
  --ink: #292b28;
  --timeline-ink: var(--ink);
  --timeline-paper: var(--paper);
  --page-space: 48px;
  --headline-size: clamp(28px, 3vw, 40px);
  --headline-font: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --headline-weight: 400;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  padding: var(--page-space) 16vw var(--page-space) 8vw;
  color: var(--ink);
  background: var(--paper);
  font: 400 14px/1.8 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
body .content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: calc(100svh - 2 * var(--page-space));
  padding: 0; gap: 48px;
}
.title { font: 400 16px/1.25 ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.introduction { margin-bottom: 10vh; }
.bio { max-width: 640px; font: var(--headline-weight) var(--headline-size)/1.2 var(--headline-font); letter-spacing: -.035em; }
.intro-copy::after {
  content: ''; display: block; width: 88px; height: 2px;
  margin-top: 32px; background: currentColor;
  transform-origin: left center;
  animation: ink 3.2s ease-in-out -.8s infinite alternate;
}
@keyframes ink { from { opacity: .35; transform: translateX(0) scaleX(.3); } to { opacity: .9; transform: translateX(12px) scaleX(1); } }
@keyframes circle { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.content .site-footer { padding: 0; }
.links { list-style: none; font-size: 11px; line-height: 1.9; }
.links__item:first-child { margin-bottom: 10px; }
@media (min-width: 900px) { body { padding-left: 10vw; } }
@media (max-width: 599px) { body { padding-inline: 8vw 20vw; } }
@media (prefers-reduced-motion: reduce) { .intro-copy::after, body::before { animation: none; } }
@media (min-width: 900px) { body { padding-left: 15vw; } }
:root { --headline-size: clamp(28px, 3.4vw, 46px); }

@media (min-width: 600px) { .page-header { padding-bottom: 20px; border-bottom: 1px solid #292b281f; } }
:root { --headline-size: clamp(28px, 3.6vw, 48px); }