/* ============================================================
   About page = a Wayback Machine. The dark archive bar sits where the
   browser chrome would, and the year strip reskins the page beneath it.
   ============================================================ */
body.wayback { margin: 0; background: #2b2b2b; }

.wb { background: #1c1c1c; color: #fff; font-family: Helvetica, Arial, sans-serif; }
.wb-head { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid #333; }
.wb-logo { font-size: 14px; font-weight: bold; letter-spacing: .3px; color: #fff; text-decoration: none; flex: 0 0 auto; }
.wb-logo b { color: #6fa8ff; }
.wb-url {
  flex: 1; min-width: 0; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  color: #8fd08f; background: #000; border-radius: 3px; padding: 5px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-strip { padding: 9px 14px 11px; background: #242424; }
.wb-hint { display: block; font-size: 12px; color: #9a9a9a; margin-bottom: 8px; }
.wb-years { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-year {
  font: 12px Helvetica, Arial, sans-serif; color: #c4c4c4; background: #333; border: 1px solid #444;
  border-radius: 3px; padding: 3px 7px; cursor: pointer; line-height: 1.4;
}
.wb-year:hover { background: #3d3d3d; color: #fff; }
.wb-year.active { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: bold; }

/* Period furniture: present in the DOM, shown only for the matching skin */
.wayback .beta, .wayback .marquee, .wayback .counter, .wayback .framenav { display: none; }
.wayback.skin-web2 .beta { display: inline-block; }
.wayback.skin-geocities .marquee { display: block; }
.wayback.skin-geocities .counter { display: block; }
.wayback.skin-frames .framenav,
.wayback.skin-myspace .framenav,
.wayback.skin-facebook .framenav,
.wayback.skin-windows-xp .framenav { display: block; }

@media (max-width: 700px) { .winframe { margin: 10px; } }