/* The Vault - Encarta 95 chrome on modern underpinnings.
   Period look, but it reflows: the window becomes a single column under 640px
   and nothing ever scrolls sideways. A deliberately committed single
   appearance, unlike the theme-aware apex. */

:root {
  --face:   #c0c0c0;   /* classic dialog grey */
  --lit:    #ffffff;
  --shadow: #808080;
  --dark:   #404040;
  --title:  #000080;
  --title2: #1084d0;
  --paper:  #fffef8;
  --ink:    #1a1a1a;
  --link:   #0000c0;
  --void:   #008080;   /* the teal desktop */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--void);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
  color: var(--ink);
  font: 13px/1.5 Tahoma, Verdana, "DejaVu Sans", sans-serif;
  min-height: 100vh;
}

/* --- window ------------------------------------------------------------- */

.win {
  max-width: 54rem;
  margin: 0 auto;
  background: var(--face);
  border: 1px solid var(--dark);
  border-top-color: var(--lit);
  border-left-color: var(--lit);
  box-shadow: 1px 1px 0 var(--shadow), 3px 3px 10px rgba(0,0,0,.35);
  padding: 2px;
}

.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, var(--title), var(--title2));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.bar .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .btns { display: flex; gap: 2px; }
.bar .btn {
  width: 16px; height: 14px;
  background: var(--face);
  border: 1px solid var(--dark);
  border-top-color: var(--lit); border-left-color: var(--lit);
  color: #000; font: 9px/12px Tahoma, sans-serif; text-align: center;
}

.menu {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--shadow);
  font-size: 12px;
}
.menu span { padding: 2px 7px; }
.menu span:first-child { text-decoration: underline; }

/* --- content ------------------------------------------------------------ */

.page {
  background: var(--paper);
  border: 1px solid var(--shadow);
  border-bottom-color: var(--lit); border-right-color: var(--lit);
  margin: 4px;
  padding: 18px 20px 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.6;
}

.kicker {
  font: 700 10px/1 Tahoma, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5a5a4a;
  margin: 0 0 6px;
}

h1 {
  font: 700 25px/1.2 Georgia, "Times New Roman", serif;
  margin: 0 0 2px;
}

.sub { margin: 0 0 14px; color: #55524a; font-size: 13.5px; font-style: italic; }

.plate {
  float: right;
  width: 46%;
  margin: 2px 0 14px 20px;
  background: var(--face);
  border: 1px solid var(--dark);
  border-top-color: var(--lit); border-left-color: var(--lit);
  padding: 5px;
}
.plate img { display: block; width: 100%; height: auto; background: #ddd; }
.plate .cap {
  font: 11px/1.4 Tahoma, sans-serif;
  color: #3a3a34;
  padding: 5px 2px 1px;
}

.facts {
  margin: 0 0 14px;
  font: 12px/1.65 Tahoma, sans-serif;
  color: #33312c;
}
.facts b { color: #000; }

h2 {
  font: 700 11px/1 Tahoma, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5a5a4a;
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #d8d4c4;
  clear: right;
}

ul.jump { list-style: none; margin: 0; padding: 0; }
ul.jump li { margin: 0 0 7px; font-family: Tahoma, sans-serif; font-size: 13px; }
ul.jump a { color: var(--link); text-decoration: underline; }
ul.jump a:hover { background: #ffe9a8; }
ul.jump .arrow { color: #008000; font-weight: 700; margin-right: 6px; }

.xref { font-family: Tahoma, sans-serif; font-size: 12.5px; color: #3a3832; }
.xref p { margin: 0 0 8px; }
.xref b { color: #000; }

.credit {
  margin: 18px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e4e0d0;
  font: 10.5px/1.5 Tahoma, sans-serif;
  color: #6b6860;
}
.credit a { color: #5a5a7a; }

/* --- name prompt -------------------------------------------------------- */

.ask {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #ffffe1;
  border: 1px solid #b0a060;
  font: 12px/1.5 Tahoma, sans-serif;
}
.ask form { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.ask input[type=text] {
  flex: 1 1 10rem; min-width: 0;
  padding: 3px 5px;
  font: 12px Tahoma, sans-serif;
  border: 1px solid var(--shadow);
  border-top-color: var(--dark); border-left-color: var(--dark);
  background: #fff;
}
.ask button {
  padding: 3px 14px;
  font: 12px Tahoma, sans-serif;
  background: var(--face);
  border: 1px solid var(--dark);
  border-top-color: var(--lit); border-left-color: var(--lit);
  cursor: pointer;
}
.ask button:active { border-color: var(--lit) var(--dark) var(--dark) var(--lit); }

/* --- status bar --------------------------------------------------------- */

.status {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 4px; padding: 0;
  font: 11px/1 Tahoma, sans-serif;
}
.status div {
  padding: 3px 7px;
  border: 1px solid var(--lit);
  border-top-color: var(--shadow); border-left-color: var(--shadow);
  color: #2a2a2a;
}
.status .grow { flex: 1; }

/* the shelf nobody can see */
.unlit {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  body { padding: 8px; }
  .plate { float: none; width: 100%; margin: 0 0 14px; }
  .page { padding: 14px 13px 18px; font-size: 14.5px; }
  h1 { font-size: 21px; }
}

/* Index pages: a dense list, with each entry's department shown quietly so a
   reader can tell an on-subject entry from one that wanders. */
ul.jump.idx li { margin: 0 0 5px; }
ul.jump.idx .in {
  font-size: 11px;
  color: #6b6860;
  margin-left: 8px;
}
.menu a { color: inherit; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

/* Menu items that do nothing, drawn the way Windows 95 drew a disabled one:
   grey with a white highlight beneath. Honest about being unavailable rather
   than inviting a click that goes nowhere. Timeline, Gallery, Atlas and Help
   are deliberately not implemented - a plate-dense gallery page in particular
   would multiply image egress from this server with every crawl, and the
   throttling strategy here is to spend a crawler's time, not our bandwidth. */
.menu .off {
  color: var(--shadow);
  text-shadow: 1px 1px 0 var(--lit);
  cursor: default;
}