@import url('https://fonts.googleapis.com/css2?family=Literata:wght@400;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg-1:#fbf8f1;
  --bg-2:#f1ece2;
  --fg:#151515;
  --muted:#6a635a;
  --link:#141414;
  --max: 720px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--fg);
  background-color: var(--bg-2);
  background-image:
    radial-gradient(1100px 650px at 50% -15%, rgba(255,255,255,0.9) 0%, rgba(251,248,241,0.95) 40%, rgba(241,236,226,0.65) 70%, rgba(241,236,226,0) 100%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 70%);
  background-repeat: no-repeat;
  font: 18px/1.65 "Literata", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

a{ color:var(--link); text-decoration:none; border-bottom:1px solid currentColor; }
a:hover{ border-bottom-color: transparent; }

.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 20px 80px;
}

h1{
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: .2px;
  font-style: italic;
  text-align: center;
}

.nav{
  font: 14px/1.4 "Space Mono", "Fira Mono", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 24px;
  text-align: center;
}

.nav a{ color: var(--fg); border-bottom: 1px solid transparent; }
.nav a:hover{ border-bottom-color: var(--fg); }

.sep{
  margin: 0 12px;
  color: var(--muted);
}

.bullets{
  margin: 20px 0 0;
  padding-left: 18px;
}

.bullets li{ margin: 10px 0; }

.intro{
  margin: 20px 0 0;
}

.section-title{
  margin: 36px 0 10px;
  font: italic 13px/1.4 "Space Mono", "Fira Mono", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  text-align: center;
}

.exp-item{
  margin-top: 20px;
}

.role{
  margin: 0 0 6px;
  font-weight: 600;
}

.dates{
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95em;
}

.exp-item .bullets{
  margin-top: 8px;
}

.handles{
  margin-top: 28px;
}

.handles h2{
  margin: 0 0 10px;
  font: italic 11px/1.4 "Space Mono", "Fira Mono", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}

.handles-list{
  list-style: disc;
  padding-left: 18px;
  margin: 0;
}

.handles-list li{
  margin: 8px 0;
}

@keyframes rise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.page h1{ animation: rise 520ms ease-out both; }
.page .nav{ animation: rise 520ms ease-out 80ms both; }
.page .bullets li{ animation: rise 520ms ease-out both; }
.page .bullets li:nth-child(1){ animation-delay: 160ms; }
.page .bullets li:nth-child(2){ animation-delay: 240ms; }
.page .bullets li:nth-child(3){ animation-delay: 320ms; }

@media (max-width: 640px){
  body{ font-size: 17px; }
  h1{ font-size: 30px; }
  .page{ padding: 56px 18px 64px; }
  .nav{ font-size: 12px; }
}