:root {
  color: #000000;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}
::selection {
  background: #000000;
  color: #ffffff;
}
html, body { margin: 0; min-height: 100%; background: #ffffff; }
body { padding: 16px 16px 48px; }
a { color: #0000ee; text-decoration: underline; }
a:visited { color: #0000ee; }
a:hover, a:focus { color: #0000ee; }

nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 44px; }
nav a { display: block; }
main { max-width: 720px; }
footer { position: fixed; left: 16px; bottom: 16px; font-size: 11px; color: #555555; }
.page { padding-top: 16px; }
.back { margin-bottom: 24px; }
.note-list { display: grid; gap: 32px; margin-top: 28px; }
.placeholder { position: relative; width: 100%; padding-top: 75%; background: #0000ee; overflow: hidden; }
.placeholder-frame { position: absolute; top: 16px; right: 16px; bottom: 16px; left: 16px; }
.note-title, .note-excerpt { display: block; }
.note-title { margin-top: 6px; text-decoration: underline; }
.note-excerpt { margin-top: 2px; color: #555555; }
h1, h2, p { font-size: inherit; font-weight: normal; margin: 0; }
.prose { max-width: 620px; }
.project-lede { margin-top: 4px; }
.project-meta { margin-top: 24px; }
.project-overview { margin-top: 24px; }
.project-details { margin-top: 24px; }
.project-details p { margin: 0 0 20px; }
.note-date { display: block; margin-top: 4px; font-size: 11px; color: #555555; }
.note-text-block { margin-top: 24px; white-space: pre-wrap; }
.note-media-list { display: grid; gap: 16px; margin-top: 24px; }
.media-block { margin: 0; max-width: 620px; }
.media-block img, .media-block video { display: block; max-width: 100%; height: auto; }
.media-block audio { display: block; width: 100%; }
.media-block small { display: block; margin-top: 8px; font-size: 11px; color: #555555; }
.media { margin: 24px 0; max-width: 100%; }
.media img, .media video { display: block; max-width: 100%; height: auto; }
.placeholder-frame img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
audio { width: min(420px, 100%); }
small { font-size: inherit; }