/* ==========================================================================
   app-browser.css — Navigator.

   Two worlds in one file, and the seam between them is the point.

   Above the line: the browser chrome, which is workstation furniture and
   uses the machine's own palette, bevels and left-hand scrollbars.

   Below the line: everything scoped under `.page`, which is the old web and
   is allowed to be ugly. Nothing under `.page` may set a variable, inherit
   upward or style a selector that exists outside it — 1996 stays in the
   viewport. Every background here is drawn: gradients and inline SVG, no
   image files, no requests.
   ========================================================================== */

/* ============================================================ the chrome === */

.nav-bar { gap: 4px; }
.nav-bar .btn { min-width: 58px; }
.nav-bar .btn:disabled,
.nav-bar .btn.dim {
  color: #7b7368;
  text-shadow: 1px 1px 0 var(--hi);
  cursor: default;
}
.nav-bar .btn:disabled:active { box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.nav-graphbtn[aria-pressed="true"] { background: var(--gray-dk); }

.nav-locbar {
  gap: 6px;
  border-bottom: 1px solid var(--lo);
  flex-wrap: nowrap;
}
.nav-locbar label { flex: 0 0 auto; }
.nav-loc {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 11.5px;
}

/* the throbber: a graph, because in this timeline that is what a document
   is. It turns while the machine is pretending to talk to somebody. */
.throb {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--gray-dk);
  color: var(--lo);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.throb .n, .throb .core { fill: var(--lo); }
.throb .t-spin { transform-origin: 15px 15px; }
.throb.on { color: var(--amber); background: #6d6155; }
.throb.on .n { fill: var(--amber-dim); animation: nav-node .9s linear infinite; }
.throb.on .core { fill: var(--amber-hot); }
.throb.on .t-spin { animation: nav-spin 2.4s linear infinite; }
.throb.on .n2 { animation-delay: .15s; }
.throb.on .n3 { animation-delay: .30s; }
.throb.on .n4 { animation-delay: .45s; }
.throb.on .n5 { animation-delay: .60s; }
.throb.on .n6 { animation-delay: .75s; }
@keyframes nav-spin { to { transform: rotate(360deg); } }
@keyframes nav-node { 0%, 100% { fill: var(--amber-dim); } 40% { fill: var(--amber-hot); } }

.nav-stack { position: relative; display: flex; flex-direction: column;
             flex: 1 1 auto; min-height: 0; }

/* the viewport. Scrollbar on the left, like everything else on this machine,
   which is the one way the chrome argues with the documents it is holding. */
.nav-view {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;
  background: #fff;
  border-top: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.18);
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.nav-view > * { direction: ltr; }
.nav-view::-webkit-scrollbar { width: 13px; }
.nav-view::-webkit-scrollbar-track { background: var(--gray-lt); }
.nav-view::-webkit-scrollbar-thumb {
  background: var(--gray); border: 1px solid var(--lo);
  border-top-color: var(--hi); border-left-color: var(--hi);
}

/* --- status line ---------------------------------------------------------- */
.nav-status { display: flex; align-items: center; gap: 7px; }
.nav-status .st-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.st-lock { flex: 0 0 auto; display: flex; color: #6b6257; }
.st-lock.sec { color: #2c5c34; }
.st-prog {
  flex: 0 0 96px; height: 9px;
  background: var(--gray-dk);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  overflow: hidden;
}
.st-prog i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--amber) 0 4px, var(--amber-dim) 4px 6px);
}

/* --- bookmarks ------------------------------------------------------------ */
.nav-marklist {
  position: absolute; z-index: 30; top: 0; right: 0;
  width: 296px; max-width: 92%; max-height: 82%;
  overflow: auto; direction: rtl;
  background: var(--gray);
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 3px 3px 0 rgba(0,0,0,.32);
  scrollbar-width: thin;
}
.nav-marklist > * { direction: ltr; }
.mk-sep {
  padding: 4px 8px 2px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--lo);
  border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi);
}
.mk-sep:first-child { border-top: 0; box-shadow: none; }
.mk {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 3px 8px;
  background: none; border: 0; cursor: default;
  font-family: var(--ui); font-size: 12px; text-align: left; color: var(--ink);
}
.mk-n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-d { flex: 0 0 auto; font-size: 10.5px; color: #4a4238; font-family: var(--mono); }
.mk:hover, .mk:focus-visible { background: var(--ink); color: var(--paper); outline: 0; }
.mk:hover .mk-d, .mk:focus-visible .mk-d { color: var(--gray-lt); }

/* --- the graph drawer -----------------------------------------------------
   The one control the other timeline earned. It is a panel of Turtle and it
   is deliberately not prettified: this is what the document says about
   itself, in the syntax it says it in.                                     */
.nav-graph {
  flex: 0 0 auto; max-height: 46%;
  display: flex; flex-direction: column;
  background: #0c0d10;
  border-top: 2px solid var(--lo);
}
.nav-graph .g-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 4px 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(229,138,60,.13), transparent);
  border-bottom: 1px solid rgba(229,138,60,.28);
}
.nav-graph .g-n { flex: 1 1 auto; color: #6f7680; letter-spacing: .08em; }
.nav-graph .g-x {
  background: none; border: 0; cursor: default;
  color: var(--amber); font-size: 14px; line-height: 1; padding: 0 2px;
}
.nav-graph .g-body {
  flex: 1 1 auto; min-height: 0; margin: 0;
  overflow: auto; direction: rtl;
  padding: 9px 12px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: #cfd6c8; white-space: pre; tab-size: 4;
  scrollbar-width: thin; scrollbar-color: #333 #111;
}
.nav-graph .g-body::-webkit-scrollbar { width: 12px; height: 12px; }
.nav-graph .g-body::-webkit-scrollbar-track { background: #111316; }
.nav-graph .g-body::-webkit-scrollbar-thumb { background: #2c3034; border: 1px solid #43484d; }

@media (prefers-reduced-motion: reduce) {
  .throb.on .t-spin, .throb.on .n { animation: none; }
}

/* ==================================================== below here is 1996 === */

.page {
  min-height: 100%;
  padding: 14px 16px 26px;
  background: #ffffff;
  color: #000;
  font: 14px/1.4 "Times New Roman", Times, serif;
}
.page * { max-width: 100%; }
.page svg { height: auto; }                     /* keep drawn figures square */
.page table { max-width: 100%; border-collapse: collapse; }
.page td, .page th { vertical-align: top; }
.page h1 { font-size: 22px; margin: 0 0 8px; }
.page h2 { font-size: 17px; margin: 16px 0 6px; }
.page h3 { font-size: 15px; margin: 14px 0 4px; }
.page p { margin: 0 0 10px; }
.page ul, .page ol { margin: 0 0 10px; padding-left: 26px; }
.page li { margin: 0 0 4px; }
.page hr { border: 0; border-top: 1px solid #999; margin: 10px 0; }
.page tt, .page code { font-family: var(--mono); font-size: 12px; }
.page a { color: #0000ee; text-decoration: underline; cursor: pointer; }
.page a.v { color: #551a8b; }
.page a:hover { color: #ee0000; }
.page a.inert { color: #444; text-decoration: none; cursor: default; }
.page input, .page select, .page button {
  font: 12px var(--ui); padding: 2px 4px;
  background: #fff; color: #000;
  border: 2px inset #cfcfcf;
}
.page button, .page input[type="submit"] {
  background: #d4d0c8; border: 2px outset #e8e4dc; cursor: default;
}
.page s { color: #777; }

/* --- the drawn furniture -------------------------------------------------- */
.page .rainbow {
  height: 5px; margin: 8px 0;
  background: linear-gradient(90deg,
    #c0392b 0 14%, #d98324 14% 28%, #d6c02b 28% 42%, #3f8f4a 42% 56%,
    #2f6fa8 56% 70%, #5a3f8f 70% 84%, #8f3a6b 84% 100%);
}
.page .hrz {
  height: 2px; margin: 14px 0;
  background: linear-gradient(90deg, transparent, #4e8a80 18%, #9ad6cb 50%, #4e8a80 82%, transparent);
}
.page .counter i {
  display: inline-block; width: 13px; padding: 1px 0;
  font: 13px/1 var(--mono); font-style: normal; text-align: center;
  background: #000; color: #7dff9a;
  border: 1px solid #5a5a5a; margin-right: 1px;
}
.page .blink { color: #cc0000; font-weight: bold; font-size: 11px; }
.page .marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid #888; border-bottom: 1px solid #888;
  margin: 8px 0; padding: 3px 0;
  font-size: 12px;
}
.page .marquee > span {
  display: inline-block; padding-left: 100%; max-width: none;
  animation: nav-march 22s linear infinite;
}
@keyframes nav-march { to { transform: translateX(-100%); } }
.page .brokenimg {
  width: 84px; height: 84px;
  background: #fff; border: 2px inset #cfcfcf;
  position: relative;
}
.page .brokenimg::before {
  content: ""; position: absolute; left: 22px; top: 20px;
  width: 26px; height: 34px;
  border: 1px solid #666; background: #eee;
  clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%);
}
.page .brokenimg::after {
  content: ""; position: absolute; left: 18px; top: 24px;
  width: 36px; height: 30px;
  background: linear-gradient(-58deg, transparent 46%, #b03030 46% 54%, transparent 54%);
}
.page .constr { display: inline-block; margin: 6px 0; }
.page .mailicon { vertical-align: middle; }
.page .mailicon .flap { transform-origin: 14px 4px; animation: nav-flap 2.6s ease-in-out infinite; }
@keyframes nav-flap { 0%, 72%, 100% { transform: rotateX(0deg); } 82% { transform: rotateX(-140deg); } }

@media (prefers-reduced-motion: reduce) {
  .page .marquee > span { animation: none; padding-left: 0; }
  .page .mailicon .flap { animation: none; }
}

/* --- tiled backgrounds, all of them drawn --------------------------------- */
.page.bg-paper {
  background-color: #f7f4ea;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.020) 0 1px, transparent 1px 4px);
}
.page.bg-weave {
  background-color: #d8d4c6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23d8d4c6'/%3E%3Cpath d='M0 0h8v8H0z M8 8h8v8H8z' fill='%23cfcabb'/%3E%3Cpath d='M0 8h8v1H0z M8 0h8v1H8z' fill='%23bfb9a8'/%3E%3C/svg%3E");
}
.page.bg-linen {
  background-color: #f4efe2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23f4efe2'/%3E%3Cpath d='M0 0v12M6 0v12' stroke='%23e6dfcd' stroke-width='1'/%3E%3Cpath d='M0 3h12M0 9h12' stroke='%23eae4d4' stroke-width='1'/%3E%3C/svg%3E");
}
.page.bg-grid {
  background-color: #fbfbf7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23fbfbf7'/%3E%3Cpath d='M0 23.5h24M23.5 0v24' stroke='%23dde2e8' stroke-width='1'/%3E%3C/svg%3E");
}
.page.bg-plain { background: #ffffff; }
.page.bg-flat { background: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 13.5px; }

.page.bg-stars {
  background-color: #000010;
  background-image:
    radial-gradient(1px 1px at 17px 23px, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 63px 11px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 41px 77px, rgba(200,220,255,.75), transparent),
    radial-gradient(1px 1px at 96px 54px, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 8px 91px, rgba(255,240,200,.6), transparent);
  background-size: 120px 110px;
  color: #ffffff;
}
.page.bg-dark { background: #07080b; color: #c8d2cc; }

/* --- amateur, 1996 -------------------------------------------------------- */
.page.amateur { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.page.amateur a { color: #66ccff; }
.page.amateur a.v { color: #cc99ff; }
.page.amateur a:hover { color: #ffff00; }
.page .neon {
  font: bold 34px Arial, Helvetica, sans-serif; letter-spacing: .06em;
  color: #ff4fd8;
  text-shadow: 0 0 6px #ff4fd8, 0 0 14px rgba(255,79,216,.6), 2px 2px 0 #000;
  margin: 6px 0 2px;
}
.page .midi {
  display: inline-block; margin: 10px 0;
  padding: 6px 10px;
  background: #1a1a2e; border: 2px outset #444466;
}
.page .midibtn {
  font: 11px var(--mono);
  background: #2b2b44; color: #cfe; border: 2px outset #55557a;
  padding: 2px 7px; cursor: default;
}
.page .ringbox {
  display: inline-block; padding: 8px 14px; margin: 8px 0;
  background: #ffffcc; border: 3px ridge #cc9933; color: #000;
}
.page .ringbox a { color: #0000cc; }

/* --- dark, 1999 ----------------------------------------------------------- */
.page .dk { max-width: 70ch; }
.page .dk h1 { font: bold 20px var(--mono); letter-spacing: .24em; color: #9ad6cb; margin: 0; }
.page .dk h2 { font: bold 14px var(--mono); letter-spacing: .08em; color: #d6c08a; }
.page .dk .dk-sub { font: 11px var(--mono); color: #6a7a74; margin: 2px 0 0; }
.page .dk .dk-lead { color: #dde4df; }
.page.bg-dark a { color: #79c7ff; }
.page.bg-dark a.v { color: #b49bff; }
.page .dk-foot { font-size: 11px; color: #78857f; line-height: 1.7; }

/* --- the W3C note --------------------------------------------------------- */
.page.w3c { font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; line-height: 1.5; }
.page.w3c .w3c-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.page.w3c .w3c-mark {
  font: bold 26px Arial, Helvetica, sans-serif; letter-spacing: -.02em;
  background: #1a3a6b; color: #fff; padding: 3px 9px;
}
.page.w3c .w3c-org { font-size: 12px; color: #444; letter-spacing: .04em; }
.page.w3c h1 { font-size: 21px; margin: 0 0 2px; }
.page.w3c h2 { font-size: 16px; margin: 18px 0 6px; }
.page.w3c h2.sub { font-size: 14px; color: #333; margin: 0 0 12px; font-weight: normal; }
.page.w3c .w3c-vers { margin: 0 0 10px; font-size: 12.5px; }
.page.w3c .w3c-vers dt { font-weight: bold; }
.page.w3c .w3c-vers dd { margin: 0 0 3px 18px; word-break: break-all; }
.page.w3c .w3c-copy { font-size: 11.5px; color: #444; }
.page.w3c .w3c-status {
  border: 1px solid #999; background: #f4f4f0;
  padding: 9px 12px; margin: 6px 0 4px;
  font-size: 12.5px;
}
.page.w3c .w3c-status p:last-child { margin-bottom: 0; }
.page.w3c .fig { margin: 14px 0 18px; overflow-x: auto; }
.page.w3c .fig svg { border: 1px solid #bbb; background: #fff; display: block; }
.page.w3c svg text.lbl { font: 12px Arial, Helvetica, sans-serif; fill: #16181c; }
.page.w3c svg text.cap { font: 9px Arial, Helvetica, sans-serif; fill: #666; }
.page.w3c .figcap { font-size: 11.5px; color: #444; margin: 5px 0 0; }
.page.w3c .w3c-tbl { font-size: 12.5px; border-color: #999; }
.page.w3c .w3c-tbl th { background: #e8e8e2; text-align: left; }
.page.w3c .w3c-foot { font: 11px var(--mono); color: #666; }

/* --- plain personal / log ------------------------------------------------- */
.page .plain { max-width: 64ch; font-family: Georgia, "Times New Roman", serif; }
.page .plain h1 { font-size: 24px; margin: 0 0 4px; }
.page .plain h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #555; }
.page .plain .tagline { color: #555; font-style: italic; margin-bottom: 16px; }
.page .plain .crumb, .page .plain .byline { font-size: 12px; color: #777; }
.page .plain .plainnav, .page .plain .plainlist { list-style: none; padding: 0; }
.page .plain .plainnav li, .page .plain .plainlist li { margin-bottom: 6px; }
.page .plain .plainlist .d { font: 11.5px var(--mono); color: #888; margin-right: 8px; }
.page .plain .foot { margin-top: 22px; font-size: 12px; color: #777; border-top: 1px solid #ddd; padding-top: 8px; }
.page .plain p { line-height: 1.6; }

/* --- the link log, 2005 --------------------------------------------------- */
.page .links { font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 12px; }
.page .lk-head { border-bottom: 3px solid #3b5998; padding-bottom: 4px; font-size: 15px; }
.page .lk-count { float: right; font-size: 11px; color: #777; font-weight: normal; }
.page .lk-main { padding-right: 18px; }
.page .lk-side { width: 172px; border-left: 1px solid #ddd; padding-left: 12px; }
.page .lk-day { margin: 14px 0 6px; font-weight: bold; color: #444; border-bottom: 1px solid #eee; }
.page .lk { margin: 0 0 10px; }
.page .lk a { font-size: 13px; font-weight: bold; }
.page .lk-n { color: #333; margin: 1px 0; }
.page .lk-t { font-size: 11px; color: #777; }
.page .lk-t b { color: #3b5998; font-weight: normal; }
.page .lk-sh { font-size: 11px; text-transform: uppercase; color: #999; margin: 12px 0 4px; }
.page .lk-tags { line-height: 1.7; }
.page .lk-tags span { color: #999; font-size: 10px; }
.page .lk-foot { margin-top: 18px; border-top: 1px solid #ddd; padding-top: 6px; color: #777; font-size: 11px; }

/* --- the graph search engine, 2003 ---------------------------------------- */
.page .gs { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.page .gs-head { border-bottom: 1px solid #ccc; padding-bottom: 6px; }
.page .gs-mark { font: bold 22px var(--mono); color: #2f6fa8; letter-spacing: -.03em; }
.page .gs-tag { font-size: 11px; color: #777; margin-left: 10px; }
.page .gs-form { margin: 10px 0 4px; }
.page .gs-form input[type="text"] { font-family: var(--mono); font-size: 11.5px; }
.page .gs-stat { font-size: 11px; color: #777; margin-bottom: 12px; }
.page .gs-main { padding-right: 18px; }
.page .gs-side { width: 190px; border-left: 1px solid #ddd; padding-left: 12px; }
.page .trip { font-family: var(--mono); font-size: 11.5px; margin: 10px 0 1px; word-break: break-word; }
.page .trip .s { color: #1a4a8a; }
.page .trip .p { color: #7a3e00; }
.page .trip .o { color: #1a6b32; }
.page .src { font-size: 10.5px; color: #777; margin-bottom: 4px; }
.page .src .warn { color: #a03030; }
.page .gs-sh { font-size: 10.5px; text-transform: uppercase; color: #999; margin: 12px 0 4px; }
.page .gs-facet { font-family: var(--mono); font-size: 11px; line-height: 1.8; }
.page .gs-facet span { color: #999; }
.page .gs-note { font-size: 11px; color: #666; line-height: 1.5; }
.page .gs-more { margin: 14px 0; }
.page .gs-foot { margin-top: 16px; border-top: 1px solid #ddd; padding-top: 6px; font-size: 10.5px; color: #777; }

/* --- the bookshop, 1997 --------------------------------------------------- */
.page .cb-top { border-bottom: 1px solid #8a7a5a; }
.page .secure {
  display: inline-block; padding: 2px 6px;
  background: #2c5c34; color: #fff; font-size: 10px; letter-spacing: .08em;
}
.page .cb-nav { background: #efe9da; border: 1px solid #ccc2a8; }
.page .cb-find { margin: 0 0 12px; }
.page .cb-feature { border: 2px ridge #c9b98f; padding: 8px 10px; margin: 0 0 14px; background: #fffdf5; }
.page .cb-list td { border-bottom: 1px solid #e4dcc6; font-size: 12px; }
.page .cb-ship { margin-top: 14px; border-top: 1px solid #ccc2a8; padding-top: 6px; }

/* --- the department, 1998 ------------------------------------------------- */
.page .fac td { font-size: 12px; padding-right: 14px; border-bottom: 1px dotted #ccc; }

/* --- the ring, 1997 ------------------------------------------------------- */
.page .ring-list td { font-size: 12px; border-bottom: 1px solid #e0e0e0; padding: 2px 6px 2px 0; }
.page .ring-list .ok { color: #2c5c34; }
.page .ring-list .dead { color: #8f2a2a; }
.page .ring-list .warn { color: #8a6a1a; }

/* --- the lab, 2019 -------------------------------------------------------- */
.page .sd { font-family: Helvetica, Arial, sans-serif; }
.page .sd-bar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  border-bottom: 3px solid #7a2027; padding-bottom: 8px;
}
.page .sd-logo { font-size: 19px; font-weight: bold; letter-spacing: -.01em; flex: 1 1 auto; }
.page .sd-nav a { margin-left: 14px; font-size: 12px; text-decoration: none; color: #7a2027; }
.page .sd-hero { padding: 18px 0 10px; border-bottom: 1px solid #e4e4e4; }
.page .sd-hero h1 { font-size: 23px; line-height: 1.25; max-width: 30ch; margin-bottom: 8px; }
.page .sd-hero p { max-width: 62ch; color: #444; }
.page .sd-cols { display: flex; flex-wrap: wrap; gap: 22px; padding: 16px 0; }
.page .sd-col { flex: 1 1 210px; font-size: 12.5px; }
.page .sd-col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #7a2027; }
.page .sd-news { border-top: 1px solid #e4e4e4; padding-top: 12px; }
.page .sd-news h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #7a2027; }
.page .sd-news ul { list-style: none; padding: 0; font-size: 12.5px; }
.page .sd-news li { padding: 4px 0; border-bottom: 1px solid #f0f0f0; }
.page .sd-news .d { display: inline-block; width: 92px; color: #888; font-size: 11.5px; }
.page .sd-more { font-size: 12px; }
.page .sd-foot { margin-top: 18px; border-top: 1px solid #e4e4e4; padding-top: 10px;
                 font-size: 11px; color: #777; line-height: 1.7; }

/* --- the study platform, 2021 --------------------------------------------- */
.page .tr { font-family: Helvetica, Arial, sans-serif; max-width: 58ch; margin: 0 auto; }
.page .tr-box { border: 1px solid #d4d4d4; border-radius: 3px; padding: 20px; background: #fafafa; }
.page .tr-mark { font-size: 24px; font-weight: bold; letter-spacing: -.02em; }
.page .tr-sub { font-size: 12px; color: #666; margin: 2px 0 16px; }
.page .tr-form label { display: block; font-size: 11px; text-transform: uppercase;
                       letter-spacing: .08em; color: #555; margin-bottom: 3px; }
.page .tr-form input { display: block; width: 100%; margin-bottom: 12px;
                       border: 1px solid #bbb; border-radius: 2px; padding: 6px; font-size: 13px; }
.page .tr-go { background: #2d4f7c; color: #fff; border: 0; border-radius: 2px;
               padding: 8px 18px; font-size: 13px; }
.page .tr-help { font-size: 11.5px; margin: 12px 0 0; }
.page .tr-consent { font-size: 12px; color: #333; line-height: 1.55; margin-top: 18px; }
.page .tr-irb { font-size: 11px; color: #666; border-top: 1px solid #e4e4e4; padding-top: 8px; }
.page .tr-foot { margin-top: 16px; font-size: 11px; color: #888; }

/* --- the manual nobody wrote ---------------------------------------------- */
.page .nd { font-family: Helvetica, Arial, sans-serif; font-size: 13px; max-width: 72ch; }
.page .nd-crumb { font: 11px var(--mono); color: #777; margin: 0 0 10px; }
.page .nd-warn { background: #fff8e0; border: 1px solid #e0cc80; padding: 6px 10px; font-size: 12px; }
.page .nd .todo, .page .nd td.todo { color: #9a3a1a; font-family: var(--mono); font-size: 11.5px; }
.page .nd-tbl { font-size: 12px; border-color: #ccc; }
.page .nd-tbl th { background: #eee; text-align: left; }
.page .nd-foot { margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 8px;
                 font-size: 11px; color: #777; }

/* --- the archive's own failure page ---------------------------------------
   Flat, institutional, no apology and no joke. An archive that decorates its
   holes is lying about how big they are.                                   */
.page .fail {
  max-width: 68ch;
  font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5;
  color: #1a1a1a;
}
.page .fail-mark {
  font: bold 11px var(--mono); letter-spacing: .3em;
  color: #6b2020; margin-bottom: 10px;
}
.page .fail-url { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.page .fail hr { border-top: 1px solid #ccc; margin: 12px 0; }
.page .fail-line { font-weight: bold; }
.page .fail-facts {
  display: grid; grid-template-columns: 150px 1fr; gap: 2px 12px;
  margin: 16px 0 0; font-family: var(--mono); font-size: 11.5px;
}
.page .fail-facts dt { color: #777; }
.page .fail-facts dd { margin: 0; }
.page .fail-foot { margin-top: 20px; font-size: 11px; color: #777; }

/* --- narrow windows -------------------------------------------------------
   The desktop stacks below 860px and the viewport can end up at 380. Old
   pages were built for 640 and do not care, so the columns are unstacked
   here rather than reflowed: that is what they looked like on a small
   screen then, too.                                                        */
@media (max-width: 520px) {
  .nav-bar .btn { min-width: 0; padding: 5px 8px; }
  .page { padding: 10px 10px 20px; }
  .page .lk-side, .page .gs-side { display: none; }
  .page .lk-main, .page .gs-main { padding-right: 0; }
  .page .fail-facts { grid-template-columns: 120px 1fr; }
}