/* Prosperous Boomer - glossary sheet, written for this site */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #EEF1F5; color: #1E2225;
  font: 16px/1.6 Verdana, Geneva, sans-serif;
}
a { color: #1B3A63; }
a:focus-visible, .cell:focus-visible, .fig:focus-visible {
  outline: 2px solid #1B3A63; outline-offset: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: #1B3A63;
  padding: 8px 12px; border: 1px solid #C6CFDA; z-index: 5;
}
.skip:focus { left: 8px; top: 8px; }
.shell {
  width: min(1080px, 100% - 32px); margin: 24px auto 40px;
  background: #fff; border: 1px solid #C6CFDA;
}

/* header ------------------------------------------------------------------ */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px; border-bottom: 1px solid #C6CFDA;
}
.brandline { display: flex; align-items: center; gap: 12px; }
.brandline img { width: 34px; height: 34px; display: block; }
.wordmark {
  font: 26px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .01em;
  color: #1E2225; text-decoration: none; display: block;
}
.tagline {
  font: 12px/1.4 Verdana, Geneva, sans-serif; color: #5C646D; margin: 2px 0 0;
}
.utility { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }

/* alphabet band ----------------------------------------------------------- */
.letters {
  display: grid; grid-template-columns: repeat(26, minmax(0, 1fr));
  border-bottom: 1px solid #C6CFDA; background: #fff;
}
.cell {
  display: flex; align-items: center; justify-content: center;
  height: 44px; border-right: 1px solid #C6CFDA;
  font: bold 13px/1 Verdana, Geneva, sans-serif;
  color: #1B3A63; text-decoration: none;
}
.cell:last-child { border-right: 0; }
.cell:hover { background: #F3F6FA; }
.cell.off { color: #9AA3AD; background: #F7F9FB; }

/* body grid --------------------------------------------------------------- */
.sheet {
  display: grid; grid-template-columns: 300px 1fr; column-gap: 28px;
  padding: 24px;
}
.finder { min-width: 0; grid-column: 1; grid-row: 1 / span 3; }
.bodycol { min-width: 0; grid-column: 2; grid-row: 1; }
.bandone { min-width: 0; grid-column: 2; grid-row: 2; }
.bandtwo { min-width: 0; grid-column: 2; grid-row: 3; }
.wide { padding: 0 24px 24px; }

.fbox { border: 1px solid #C6CFDA; border-top: 2px solid #1B3A63; padding: 12px; margin: 0 0 16px; }
.fbox h2 { font: 15px/1.3 Georgia, "Times New Roman", serif; margin: 0 0 8px; }
.fbox ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.fbox li { padding: 4px 0; border-bottom: 1px solid #E2E7ED; }
.fbox li:last-child { border-bottom: 0; }
.fbox p { font-size: 13px; margin: 0 0 8px; color: #3F464D; }
.count { color: #5C646D; }
.lettersrecap { display: flex; flex-wrap: wrap; gap: 6px; }
.lettersrecap a, .lettersrecap span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid #C6CFDA;
  font: bold 12px/1 Verdana, Geneva, sans-serif; text-decoration: none;
}
.lettersrecap span { color: #9AA3AD; background: #F7F9FB; }

/* panels and prose -------------------------------------------------------- */
.panel { background: #F3F6FA; border: 1px solid #C6CFDA; padding: 16px 18px; margin: 0 0 20px; }
.panel .label { font: 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .09em; color: #5C646D; margin: 0 0 6px; }
.panel h1, .panel h2, .panel .lead {
  font: 30px/1.25 Georgia, "Times New Roman", serif; margin: 0 0 10px; color: #1E2225;
}
.panel p.def { margin: 0; font-size: 16px; }
.panel .more { margin: 10px 0 0; font-size: 12px; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 14px; }
h1 { font: 30px/1.25 Georgia, "Times New Roman", serif; margin: 0 0 12px; }
h2 { font: 22px/1.3 Georgia, "Times New Roman", serif; margin: 26px 0 10px; }
h3 { font: 19px/1.3 Georgia, "Times New Roman", serif; margin: 22px 0 8px; }
.scope { font-size: 14px; color: #3F464D; margin: 0 0 18px; }

/* ledger rows ------------------------------------------------------------- */
.ledger { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid #E2E7ED; }
.ledger li { border-bottom: 1px solid #E2E7ED; padding: 10px 0 10px 12px; position: relative; }
.ledger li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 14px; background: #1B3A63;
}
.ledger .name { font: bold 16px/1.35 Verdana, Geneva, sans-serif; text-decoration: none; }
.ledger .name:hover { text-decoration: underline; }
.ledger .gloss {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  font-size: 14px; color: #3F464D; margin-top: 3px;
}
.ledger .topic {
  font: 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .09em;
  color: #5C646D; white-space: nowrap;
}
.band { margin: 0 0 26px; }
.band > h2 { margin-top: 0; }

/* recent table ------------------------------------------------------------ */
.recent { width: 100%; border-collapse: collapse; font-size: 14px; }
.recent caption { text-align: left; font: 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .09em; color: #5C646D; padding-bottom: 6px; }
.recent th, .recent td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid #E2E7ED; vertical-align: top; }
.recent th { font: 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .09em; color: #5C646D; }
.recent td.num { text-align: right; padding-right: 0; color: #5C646D; white-space: nowrap; }

/* note and footer --------------------------------------------------------- */
.note { border-top: 2px solid #1B3A63; border-bottom: 1px solid #C6CFDA; padding: 16px 0; margin: 26px 0 0; }
.note h2 { margin-top: 0; }
.note p { max-width: 72ch; font-size: 15px; }
.colophon { border-top: 1px solid #C6CFDA; padding: 20px 24px; background: #F7F9FB; }
.colcols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.colcols section { border-top: 1px solid #C6CFDA; padding-top: 10px; }
.colcols h2 { font: 15px/1.3 Georgia, "Times New Roman", serif; margin: 0 0 8px; }
.colcols ul { margin: 0; padding-left: 18px; font-size: 13px; color: #3F464D; }
.colcols li { margin-bottom: 6px; }
.colrule { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid #C6CFDA; font-size: 12px; color: #5C646D; }

/* breadcrumb, figure, related --------------------------------------------- */
.crumb { font: 11px/1.5 Arial, Helvetica, sans-serif; letter-spacing: .09em; color: #5C646D; margin: 0 0 12px; }
.crumb a { color: #1B3A63; }
.termhead { display: flex; align-items: flex-start; gap: 12px; }
.termhead .letterbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid #C6CFDA; border-top: 2px solid #1B3A63;
  font: bold 15px/1 Verdana, Geneva, sans-serif; color: #1B3A63; flex: 0 0 auto;
}
.fig { border: 1px solid #C6CFDA; background: #FBFCFD; padding: 14px; overflow-x: auto; margin: 0 0 8px; }
.fig pre { margin: 0; font: 14px/1.55 "Courier New", Courier, monospace; white-space: pre; }
.figcap { font-size: 12px; color: #5C646D; margin: 0 0 20px; max-width: 68ch; }
.deflist { margin: 0; }
.deflist dt { font: bold 16px/1.4 Verdana, Geneva, sans-serif; margin: 16px 0 4px; }
.deflist dd { margin: 0; font-size: 15px; color: #2B3136; max-width: 68ch; }
.backline { margin: 24px 0 0; font-size: 14px; }

/* responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .sheet { grid-template-columns: 240px 1fr; column-gap: 20px; }
}
@media (max-width: 640px) {
  .shell { width: 100%; margin: 0; border-left: 0; border-right: 0; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
  .letters {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .cell { flex: 0 0 44px; height: 44px; }
  .sheet { display: flex; flex-direction: column; padding: 16px; }
  .bodycol { order: 1; }
  .bandone { order: 2; }
  .finder { order: 3; margin: 24px 0 0; }
  .bandtwo { order: 4; }
  .wide { padding: 0 16px 16px; }
  .panel .lead, .panel h1 { font-size: 24px; }
  h1 { font-size: 24px; }
  .ledger .gloss { display: block; }
  .ledger .topic { display: block; margin-top: 4px; }
  .ledger .name { font-size: 15px; }
  .colcols { grid-template-columns: 1fr; gap: 18px; }
  .colophon { padding: 18px 16px; }
}