/* The 1999 index.html used images/back.jpg -- a washed-out print of the map
   itself -- as its page wallpaper, and a yellow-on-black note box. Both are
   kept here. */
:root {
  --ink:     #1e1c19;
  --dim:     #6d675f;
  --rule:    #d6d0c4;
  --paper:   #fbf9f4;
  --yellow:  #ffff00;
  --maroon:  #8c1b41;
  --blue:    #2b4c9b;
  --flash:   #c8102e;
  --java:    #e76f00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 70px;
  color: var(--ink);
  background: #efece4 url("art/wallpaper.jpg") repeat top center;
  font: 15px/1.65 Georgia, "Times New Roman", serif;
}

main, .masthead { max-width: 760px; margin: 0 auto; }

/* ---------- masthead ------------------------------------------------------ */

.masthead { text-align: center; padding: 34px 0 6px; }
.logo { width: 422px; max-width: 100%; height: auto; }
.tagline {
  margin: 4px 0 20px;
  color: var(--dim);
  font-size: 15px;
  font-style: italic;
}
.launch { margin: 0 0 26px; }

.button {
  display: inline-block;
  padding: 11px 26px;
  background: linear-gradient(180deg, #a52a4d, #5e1028);
  border: 1px solid #3d0a1a;
  border-radius: 3px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .03em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.2);
}
.button:hover { background: linear-gradient(180deg, #bb3459, #6d1230); }

/* ---------- the 1999 note box --------------------------------------------- */

.note {
  border: 1px solid #000;
  background: var(--yellow);
  margin: 0 0 40px;
  padding: 4px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.note ul { margin: 8px 0; padding-left: 34px; }
.note li { margin: 3px 0; }

/* ---------- sections ------------------------------------------------------ */

section {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px 32px;
  margin: 0 0 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

h2 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: normal;
  color: var(--maroon);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
h3 {
  margin: 26px 0 6px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  color: var(--ink);
}
p { margin: 0 0 13px; }
code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: #eeeae0;
  padding: 1px 5px;
  border-radius: 2px;
}

/* ---------- two-up cards --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 18px 0;
  align-items: start;
}
.card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--flash);
  border-radius: 2px;
  padding: 14px 16px;
  background: #fff;
}
.card:last-child { border-top-color: var(--java); }
.card h3 { margin: 0 0 8px; font-size: 14px; }
.card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.card .can::before  { content: "✓ "; color: #2e7d32; font-weight: bold; }
.card .cant::before { content: "✗ "; color: var(--flash); font-weight: bold; }
.card .cant { color: var(--dim); }

/* ---------- code + wiring diagram ------------------------------------------ */

pre {
  overflow-x: auto;
  background: #23211e;
  color: #ddd8ce;
  border-radius: 3px;
  padding: 14px 16px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
pre .c   { color: #7f8b6d; }
pre .j   { color: #ffb060; font-weight: bold; }
pre .s   { color: #f0e070; font-weight: bold; }
pre .f   { color: #ff7a8a; font-weight: bold; }
pre .dim { color: #6f6a60; }
pre.wire { font-size: 12px; }

/* ---------- exhibit -------------------------------------------------------- */

.exhibit { margin: 0; text-align: center; }
.exhibit img {
  width: 165px;
  height: auto;
  border: 1px solid #444;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.exhibit figcaption {
  margin-top: 9px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- before/after --------------------------------------------------- */

.pairs {
  background: #f2eee4;
  border-left: 3px solid var(--maroon);
  padding: 9px 14px;
  font-size: 14px;
}
.pairs span { font-family: Georgia, serif; }
.pairs .fixed, .fixed { color: var(--maroon); font-weight: bold; }

.renames {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 14px;
  font-size: 13.5px;
}
.renames td { padding: 5px 8px; border-bottom: 1px solid var(--rule); }
.renames td:first-child { color: var(--dim); }
.renames td:nth-child(2) { color: var(--dim); text-align: center; width: 30px; }

/* ---------- footer --------------------------------------------------------- */

footer { text-align: center; padding: 10px 0 0; }
footer .fine {
  margin: 20px 0 0;
  color: var(--dim);
  font-size: 12px;
}
footer .fine code { background: rgba(255,255,255,.6); }

@media (max-width: 640px) {
  body { padding: 0 12px 44px; font-size: 14.5px; }
  section { padding: 20px 18px; }
  .split { grid-template-columns: 1fr; }
  pre.wire { font-size: 10px; }
}