:root {
  color-scheme: light;
  --green: #246544;
  --secondary: #48795d;
  --subtle: #557d65;
  --rule: #b9cfc0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--green);
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
main {
  width: min(100% - 96px, 960px);
  margin-inline: auto;
  padding-block: 132px 140px;
}
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 400; }
h1, .tagline { font-size: 32px; line-height: 1.35; letter-spacing: -.7px; }
.tagline { margin-top: 2px; font-style: italic; }
a { color: inherit; text-underline-offset: 5px; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: var(--green); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; border-radius: 1px; }
.social { display: inline-block; margin-top: 24px; font-size: 19px; line-height: 1.5; }
.x-mark {
  display: inline-block;
  width: 16px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -2px;
  background-color: currentColor;
  mask-image: url('/assets/x-logo.jpg');
  mask-mode: luminance;
  mask-size: 180% auto;
  mask-position: center;
  mask-repeat: no-repeat;
}
.work { margin-top: 88px; }
ol { list-style: none; padding: 0; margin: 0; }
.work > ol > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
.work > ol > li + li { margin-top: 34px; }
.number, .domain { font-family: "Courier New", monospace; font-size: 12px; line-height: 1.5; }
.number { padding-top: 13px; color: var(--secondary); }
.project { display: block; width: fit-content; max-width: 100%; text-decoration: none; }
h2 { font-size: 32px; line-height: 1.3; letter-spacing: -.5px; }
.status { font-size: 14px; letter-spacing: 0; color: var(--secondary); white-space: nowrap; }
.arrow { display: inline-block; margin-left: 8px; color: #7c9e87; font-size: 27px; transition: transform 160ms ease; }
.project:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.project:hover .arrow { transform: translateX(4px); }
.project p { margin-top: 3px; font-size: 20px; line-height: 1.5; }
.domain { display: block; margin-top: 9px; color: var(--subtle); }
.writing h2 { font-size: 25px; }
.publication { margin-top: 16px; }
.publication + .publication { margin-top: 24px; }
.publication h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.5; font-weight: 400; font-style: italic; }
.publication h3 a, .all-posts { display: inline-block; }
.articles { list-style: none; padding: 0; margin: 0; }
.articles li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.articles li + li { margin-top: 7px; }
.articles time { font-family: "Courier New", monospace; font-size: 12px; line-height: 1.5; color: var(--subtle); }
.articles a { width: fit-content; max-width: 100%; font-size: 18px; line-height: 1.5; }
.all-posts { margin: 9px 0 0 84px; font-size: 17px; line-height: 1.5; }
.background { max-width: 580px; margin-top: 88px; margin-left: 48px; color: var(--secondary); font-size: 17px; line-height: 1.65; }

@media (max-width: 640px) {
  main { width: auto; margin-inline: 24px; padding-block: 72px 92px; }
  h1, .tagline { font-size: 28px; line-height: 1.35; letter-spacing: -.6px; }
  .tagline { margin-top: 4px; max-width: 440px; }
  .social { font-size: 18px; margin-top: 25px; }
  .work { margin-top: 68px; }
  .work > ol > li { grid-template-columns: 38px minmax(0, 1fr); }
  .work > ol > li + li { margin-top: 32px; }
  h2 { font-size: 29px; }
  .number { padding-top: 11px; font-size: 11px; }
  .project p { font-size: 18px; line-height: 1.45; }
  .domain { font-size: 11px; overflow-wrap: anywhere; }
  .articles li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .articles li + li { margin-top: 16px; }
  .all-posts { margin: 20px 0 0; }
  .publication + .publication { margin-top: 28px; }
  .background { margin-left: 38px; margin-top: 70px; font-size: 16px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .arrow { transition: none; }
}