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

:root {
  --paper: #faf8f3;
  --ink: #252822;
  --muted: #555c53;
  --warm: #f0e0d2;
  --cool: #d5dfd7;
  --accent: #875d47;
  --line: #758e80;
  --rule: #25282226;
  --timeline-ink: var(--ink);
  --timeline-paper: var(--paper);
  --block-space: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  padding: var(--block-space) 10vw;
  background: var(--paper);
  color: var(--ink);
  font: 200 16px/1.55 'Nunito Sans', sans-serif;
  -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: 6px; }
::selection { color: var(--paper); background: var(--ink); }
body::before, body::after {
  content: '';
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
body::before {
  width: 110vh; height: 110vh; top: 15vh; right: -57vh;
  background: var(--warm);
  animation: a 12s ease-in-out -3s infinite alternate;
}
body::after {
  width: 45vh; height: 45vh; top: -18vh; right: -20vh;
  background: var(--cool); opacity: .5;
  animation: b 10s ease-in-out -4s infinite alternate;
}
@keyframes a { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes b { from { transform: translateY(12%); } to { transform: translateY(-12%); } }
@keyframes drift { from { transform: translate(-10px, 8px) rotate(-4deg); } to { transform: translate(12px, -10px) rotate(4deg); } }
body .content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: calc(100svh - 2 * var(--block-space));
  padding: 0; gap: 40px;
}
.title { font: 700 24px/1 'Cormorant Garamond', serif; }
.intro-place { margin-top: 12px; font-size: 11px; font-weight: 400; letter-spacing: .025em; }
.introduction { margin-bottom: 25vh; }
.intro-copy { position: relative; z-index: 1; max-width: 560px; }
.bio { max-width: 440px; font: 200 36px/1.1 'Nunito Sans', sans-serif; letter-spacing: -.025em; }
.intro-note { max-width: 36ch; margin-top: 24px; font-size: 14px; font-weight: 400; line-height: 1.65; color: var(--muted); }
.eyebrow { margin-bottom: 28px; font-size: 10px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.content .site-footer { padding: 0; }
.links { list-style: none; font: 700 18px/1.55 'Cormorant Garamond', serif; }
.links__item:first-child { margin-bottom: .5em; }
.serif { font-family: 'Cormorant Garamond', serif; font-weight: 700; }
.ambient-art { pointer-events: none; }
.ambient-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art-drift { transform-origin: 50% 50%; animation: drift 8s ease-in-out -2s infinite alternate; }
.contours { stroke: var(--line); }
.art-wash { fill: var(--cool); opacity: .25; }
.art-orbit { fill: var(--warm); opacity: .7; }
@media (min-width: 600px) {
  body { padding: var(--block-space) 0 var(--block-space) 15vw; }
  .bio { font-size: 48px; }
  .introduction { margin-bottom: 37vh; }
  .links__item { display: inline-block; }
  .links__item:first-child { margin-bottom: 0; }
  .links__item:not(:last-child)::after { content: '—'; margin: 0 1em; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  body::before { width: 130vw; height: 130vw; top: 15vh; right: -50vw; }
  body::after { width: 65vw; height: 65vw; top: -25vh; right: -20vw; }
}
@media (min-width: 1024px) {
  body::before { width: 110vw; height: 110vw; top: 8vh; right: -26vw; }
  body::after { width: 55vw; height: 55vw; top: -45vh; right: -12vw; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .art-drift { animation: none; }
}
.bio { max-width: 500px; }
.introduction { margin-bottom: 20vh; }
@media (min-width: 600px) { .introduction { margin-bottom: 28vh; } }

@media (max-width: 599px) {
  body { padding-inline: 8vw 18vw; }
  .bio { overflow-wrap: normal; }
}
@media (min-width: 600px) and (max-width: 899px) {
  body { padding-right: 22vw; }
}