/* Birth (1990s) */
:root {
  --ink: #000;
  --muted: #333;
  --line: #b9c4e0;
  --accent: #0000ee;
  --bg: #ffffff;
  --header-bg: linear-gradient(
    90deg,
    #14226e 0%,
    #2b3fa8 55%,
    #e8ecf8 92%,
    #ffffff 100%
  );
  --header-line: #14226e;
  --code-bg: #eef0f8;
  --quote-ink: #222;
  --card-bg: transparent;
  --font-body: "Times New Roman", Times, serif;
  --font-ui: "Times New Roman", Times, serif;
}
body {
  font-size: 17px;
}
header {
  background: var(--header-bg);
  border-bottom: none;
  padding: 1.1rem 1.5rem;
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #f00 0%,
    #ff8000 8%,
    #ffe000 17%,
    #0c0 25%,
    #00c 33%,
    #8000c0 42%,
    #f00 50%
  );
  background-size: 200% 100%;
  animation: rainbow-slide 3s linear infinite;
}
@keyframes rainbow-slide {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: -200% 0;
  }
}
header a.brand,
header a.brand:visited {
  color: #fff;
  font-size: 1.35rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}
header .brand::first-letter {
  color: #ff3b30;
}
header nav a,
header nav a:visited {
  color: #ffffff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}
header nav a:hover {
  color: #ffd700;
}
header .theme-pick {
  color: #ffffff;
}
h1 {
  color: #14226e;
  text-align: center;
}
h1::first-letter {
  color: #cc0000;
}
.lede {
  text-align: center;
  border-left: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0.2rem;
  font-style: italic;
}
a {
  color: #0000ee;
  text-decoration: underline;
}
a:visited {
  color: #551a8b;
}
.meta {
  font-style: italic;
  color: #333;
  text-align: center;
}
.era h2 {
  background: linear-gradient(90deg, #14226e 0%, #2b3fa8 60%, #dfe6f8 100%);
  color: #fff;
  padding: 0.35rem 0.6rem 0.35rem 2.2rem;
  border-bottom: none;
  position: relative;
  box-shadow: 2px 2px 0 #9aa5c4;
}
.era h2 .period {
  color: #ffd7d0;
}
.era h2::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    #fff,
    #ffb060 35%,
    #e05500 75%,
    #7a2c00
  );
}
.era:nth-of-type(2) h2::before {
  background: radial-gradient(
    circle at 32% 30%,
    #fff,
    #cfe860 35%,
    #7fae00 75%,
    #3c5500
  );
}
.era:nth-of-type(3) h2::before {
  background: radial-gradient(
    circle at 32% 30%,
    #fff,
    #ff9090 35%,
    #d00000 75%,
    #600000
  );
}
.era:nth-of-type(4) h2::before {
  background: radial-gradient(
    circle at 32% 30%,
    #fff,
    #90d8ff 35%,
    #0090d0 75%,
    #004060
  );
}
.card {
  border-bottom: 1px dashed #9aa5c4;
}
ul.tl .tl-img img,
figure.cover img {
  border: 2px outset #c0c0c0;
  border-radius: 0;
}
.related {
  border-top: 1px solid var(--line);
}
.related h3 {
  color: #14226e;
  font-weight: bold;
}
footer {
  background: #efdcb4;
  border: 1px solid #c9b586;
  font-style: italic;
  color: #333;
  font-size: 0.9rem;
}
footer .visitor {
  display: inline;
  margin-left: 0.6rem;
}
footer .visitor b {
  font-weight: bold;
  color: #5d470e;
  letter-spacing: 0.1em;
}
/* square photos with 90s bevel */
.person-row .avatar {
  border-radius: 0;
  border: 2px outset #c0c0c0;
}
footer .top100 {
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
  margin-left: 0.8rem;
  border: 1px solid #9aa5c4;
}
header .burger {
  color: #000;
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 0.15rem 0.5rem;
}
header.open .burger {
  border-style: inset;
}

/*Mobile*/
@media (max-width: 640px) {
  header {
    padding: 0.6rem 1rem;
  }
  header a.brand,
  header a.brand:visited {
    font-size: 1.02rem;
    line-height: 1.3;
  }
  h1 {
    font-size: 1.5rem;
  }
  .lede {
    font-size: 0.95rem;
  }
  .era h2 {
    font-size: 1.1rem;
    padding-left: 2rem;
  }
  .era h2::before {
    width: 0.9rem;
    height: 0.9rem;
    left: 0.5rem;
  }
}
header a.brand span::first-letter {
  color: #ff3b30;
}

footer .enc-picker {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
  font-weight: bold;
  font-size: 1.05rem;
  color: #000;
}
footer .enc-picker a,
footer .enc-picker a:visited {
  color: #8f1500;
  text-decoration: underline;
  margin: 0 0.15rem;
}
footer .top100 img.top100-early {
  display: block;
}