@font-face {
  font-family: Inter;
  src: url("assets/inter-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html { background: #fff; }

body {
  margin: 0;
  padding: 60px 40px;
  color: #171717;
  font: 400 .875rem/23px Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 580px; margin: 0 auto; }
h1, p { margin: 0; font: inherit; }
.occupation { margin-top: 2px; color: #808080; }

/* Keep the original layout while allowing every expression's full frame. */
.dot {
  display: block;
  position: relative;
  width: 96px;
  height: 78px;
  margin: 0 0 24px -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dot:focus-visible { outline: 1px solid #00f; outline-offset: 4px; border-radius: 12px; }

.dot-sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 104px;
  pointer-events: none;
  transform-origin: 50% 60%;
  background: url("assets/bobby-avatar-spritesheet.png") no-repeat 0 -936px / 768px 1144px;
}

.timeline {
  display: grid;
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.timeline li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 32px; }
.year { white-space: nowrap; }
a { color: #00f; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(0 0 255 / 20%); text-underline-offset: 3px; }
a:focus-visible { outline: 1px solid #00f; outline-offset: 4px; border-radius: 1px; }

.project-preview {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 32px));
  aspect-ratio: 1243 / 936;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 180ms;
}

.project-preview.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.project-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-preview]:focus-visible { outline: 1px solid #00f; outline-offset: 4px; border-radius: 1px; }

@supports (corner-shape: superellipse(1.5)) {
  .project-preview { corner-shape: superellipse(1.5); }
}

hr { width: 48px; margin: 40px 0; border: 0; border-top: 1px solid #eee; }
footer { color: #808080; font-size: .75rem; line-height: 20px; }
.colophon { margin-top: 16px; }

@media (max-width: 1199px) {
  body { font-size: .9375rem; line-height: 24px; }
}

@media (max-width: 359px) {
  body { padding-right: 24px; padding-left: 24px; }
}

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