* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #000; color: #fff; font: 12px/1.55 Consolas, 'Courier New', monospace; }
.page { width: min(860px, calc(100% - 42px)); margin: 0 auto; padding: 64px 0 120px; }
.masthead { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 72px; }
.eye-stage { position: relative; display: block; width: 92ch; height: 15em; font: 700 4px/1 Consolas, 'Courier New', monospace; margin-bottom: 15px; color: #fff; text-decoration: none; }
.eye-stage:hover, .eye-stage:focus-visible { filter: drop-shadow(0 0 3px #999); }
.eye-stage:focus-visible { outline: 1px dotted #888; outline-offset: 5px; }
.eye-frame { position: absolute; top: 0; left: 0; margin: 0; white-space: pre; }
.frame-one { animation: eye-one 1s steps(1,end) infinite; }
.frame-two { animation: eye-two 1s steps(1,end) infinite; }
@keyframes eye-one { 0%,49.9% { visibility: visible; } 50%,100% { visibility: hidden; } }
@keyframes eye-two { 0%,49.9% { visibility: hidden; } 50%,100% { visibility: visible; } }
h1 { margin: 0; font: 400 clamp(33px,6vw,50px)/1.16 'Palatino Linotype', 'Book Antiqua', Georgia, serif; letter-spacing: .035em; text-transform: lowercase; }
.intro { max-width: 440px; margin: 16px 0 0; color: #898989; font-size: 11px; line-height: 1.8; letter-spacing: .015em; }
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 100px; row-gap: 72px; width: min(740px, 100%); margin: 0 auto; }
.profile { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.profile::after { content: '.:*.......*:.'; display: block; color: #545454; letter-spacing: .12em; margin-top: 23px; }
.avatar { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; color: #777; font-size: 20px; background: #0a0a0a; }
.avatar-link { display: block; width: fit-content; border-radius: 50%; color: inherit; text-decoration: none; }
.avatar-link:hover .avatar, .avatar-link:focus-visible .avatar { outline: 1px dotted #aaa; outline-offset: 5px; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.name { margin: 19px 0 5px; font: 400 26px/1.3 'Palatino Linotype', 'Book Antiqua', Georgia, serif; overflow-wrap: anywhere; }
.about { margin: 0; color: #a8a8a8; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { grid-column: 1 / -1; margin: 0; color: #666; text-align: center; letter-spacing: .1em; }
@media (max-width: 620px) {
  .page { padding-top: 58px; }
  .masthead { margin-bottom: 64px; }
  .profiles { grid-template-columns: 1fr; row-gap: 46px; }
  .avatar { width: 96px; height: 96px; }
  .name { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame-one, .frame-two { animation: none; }
  .frame-two { visibility: hidden; }
}