html, body {margin: 0; padding: 0;}
main, nav {
  margin: 0 20% auto;
  font: 21px/1.4 Georgia,sans-serif;
}
nav {
  background: #eee; padding: 0 1em; margin-bottom: 0.5em;
  display: flex; gap: 0.75em; align-items: center; height: 3em;
}

#links { float: right; margin-left: 2em; margin-bottom: 1em; }
.hero {  }
.date { width: 5.5em; font-size: 85%; color: #777; }
.grow { flex-grow: 1; }
.announcement { font-size: smaller; color: #777; margin-bottom: 0.5em; }
.nowrap { white-space: nowrap; }

img { max-width: 100%; }
a { text-decoration: none; }
h1 { margin: 0; }

.content > div {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden { display: none; }

nav { white-space: nowrap; }
nav small { color: #777; }

@media screen and (max-width: 1024px) {
  main, nav { margin: 0 5rem auto; }
}

@media screen and (max-width: 580px) {
  main, nav { margin: 0 1em auto; }
  .hidemobile { display: none; }
}