/* /archive/ — the old saurabh.org.in pages.
 *
 * The rule here is different from every other page on this site: DO NOT restyle the
 * recovered markup. These pages are the artifact. They carry 413 <font> tags, six
 * layout tables, <u> for emphasis, and no font-family at all — which is why a 2008
 * browser rendered them in Times. That is what they looked like. Imposing the new
 * site's typography on them would be a reconstruction pretending to be a record.
 *
 * So: .archive-body resets the inherited body/photos styles back to browser defaults
 * and then gets out of the way. Everything styled below is chrome that was never part
 * of the original — the header, the provenance stamp, the footer.
 */

/* ---- the stamp: what this is, when, and the receipt ---- */

.archive-stamp {
  background: var(--block); box-shadow: var(--shadow);
  max-width: var(--w); margin: 0 auto 20px; padding: 10px 20px;
  font-family: var(--mono); font-size: 11px; color: var(--ink3);
}
.archive-stamp a { color: var(--link); }

/* ---- the recovered page, in a white block, rendered as it was ---- */

.archive-page, .archive-index { max-width: var(--w); margin: 0 auto; }

.archive-body {
  background: #fff;              /* the original said bgcolor="white" */
  box-shadow: var(--shadow);
  padding: 24px 28px;
  overflow-x: auto;             /* the layout tables have fixed widths; let them scroll */

  /* Hand the inside back to the browser. The <font> tags do the rest, as they did. */
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: normal;
  color: #000;
}
.archive-body a { color: #800080; }           /* his link purple, from the font tags */
.archive-body a:visited { color: #800080; }
.archive-body table { border-collapse: separate; border-spacing: 2px; }
.archive-body td { padding: 1px; vertical-align: top; }
.archive-body img { max-width: 100%; }

/* Two things the recovery introduced, marked so they are never mistaken for his: */
.archive-body .lost-image {
  font-family: var(--mono); font-size: 11px; color: var(--ink3);
  border: 1px dashed var(--rule2); padding: 1px 6px; white-space: nowrap;
}
.archive-body a.dead {
  color: var(--ink3); text-decoration: line-through; cursor: default;
}

/* ---- index ---- */

.arch-title { font-family: var(--head); font-weight: 700; font-size: 30px; margin: 0 0 6px; }
.arch-intro { color: var(--ink2); max-width: 62ch; margin: 0 0 18px; }
.arch-list { list-style: none; padding: 0; margin: 0; }
.arch-row { display: flex; justify-content: space-between; gap: 2rem;
            padding: 8px 0; border-bottom: 1px solid var(--rule); }
.arch-row:last-child { border-bottom: 0; }
.arch-link { text-decoration: none; }
.arch-link:hover { text-decoration: underline; }
.arch-when { font-family: var(--mono); font-size: 12px; color: var(--ink3); white-space: nowrap; }

@media (max-width: 40rem) {
  .archive-body { padding: 14px 16px; }
  .arch-row { flex-direction: column; gap: .15rem; }
}