:root {
  --bg: #14140f;
  --ink: #e7e2d3;
  --mute: rgba(231, 226, 211, 0.55);
  --soft: rgba(231, 226, 211, 0.78);
  --line: rgba(231, 226, 211, 0.16);
  --x: 7vw;
  --r: #e15a5a;
  --y: #e7c64a;
  --b: #5b8bd6;
  --ez: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 22px/1.55 "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 32px var(--x) 96px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14vh;
  flex-wrap: wrap;
  gap: 16px;
}
header .home { display: inline-flex; }
header .home svg { width: 80px; height: 48px; opacity: .82; transition: opacity 200ms ease; }
header .home:hover svg { opacity: 1; }
header nav {
  display: flex;
  gap: 22px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
header nav a {
  color: var(--mute);
  text-decoration: none;
  transition: color 180ms ease;
}
header nav a:hover,
header nav a[aria-current="page"] { color: var(--ink); }

main { max-width: 760px; }

h1 {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.012em;
  margin-bottom: .25em;
}
h1 .dot { color: var(--mute); font-style: normal; }

.lede {
  color: var(--mute);
  margin-bottom: 7vh;
  max-width: 56ch;
  font-style: italic;
  font-size: 19px;
}

p { margin-bottom: 1em; max-width: 60ch; color: var(--soft); }

a.inline {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 226, 211, .42);
  transition: border-color 180ms ease;
}
a.inline:hover { border-bottom-color: var(--ink); }

/* List pages: writing, press */
.list { list-style: none; }
.list a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.6em;
  align-items: baseline;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding: 1.1em 0;
  transition: border-color 180ms ease;
}
.list a:hover { border-bottom-color: rgba(231, 226, 211, .55); }
.list .title { font-size: 21px; line-height: 1.3; }
.list .pub {
  font-style: italic;
  color: var(--mute);
  font-size: 16px;
}
.list .meta {
  font-family: ui-sans-serif, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
}
.list .arrow {
  display: inline-block;
  margin-left: 8px;
  color: var(--mute);
  transition: transform 280ms var(--ez), color 180ms ease;
}
.list a:hover .arrow {
  transform: translate(4px, -4px);
  color: var(--ink);
}

/* Entry pages: projects, experience */
.entry {
  margin-bottom: 2.2em;
  max-width: 62ch;
}
.entry h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: .15em;
}
.entry .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-family: ui-sans-serif, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: .55em;
}
.entry p { color: var(--soft); font-size: 19px; line-height: 1.5; }

.section-title {
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 1.5em 0 1.2em;
}
.section-title:first-of-type { margin-top: 0; }

/* About page contact list (uses .list with overrides) */
.contact-list { margin-top: 4.5em; max-width: 56ch; border-top: 1px solid var(--line); }
.contact-list a {
  grid-template-columns: 8em 1fr auto;
  padding: 0.95em 0;
}
.contact-list .cl-label {
  font-family: ui-sans-serif, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.contact-list .title { font-size: 19px; }

@media (max-width: 720px) {
  body { font-size: 19px; padding: 24px 6vw 64px; }
  h1 { font-size: 38px; }
  header { margin-bottom: 8vh; }
  header nav { font-size: 10.5px; gap: 14px; }
  .list a { grid-template-columns: 1fr auto; gap: 0.8em; }
  .list .pub { display: none; }
  .contact { grid-template-columns: 1fr; row-gap: 0.1em; }
  .contact dd { margin-bottom: 0.9em; }
}