@charset "UTF-8";
/* ==========================================================
   ColoradoSynthDoctor  -  style.css
   Synthesizer repair, electronics and photography
   last update 2026.10.22
   ========================================================== */

/* ==========================================================
   THE FONTS
   ==========================================================

   All four fonts the site uses are set here and nowhere else.
   Change one of these lines and it changes everywhere at once.

     --font-display   big things: the site name, headings, blog
                      and project titles, the lead sentence
     --font-body      ordinary reading text
     --font-label     the small capitalised labels, dates and
                      captions dotted around the edges
     --font-mono      the visitor counter

   Keep the fallbacks after your choice. A browser works along
   the list until it finds one it has, so if the first name is
   missing the page still looks sensible instead of defaulting
   to something ugly.

   Only name fonts that people actually have installed, unless
   you also load a web font. Safe on nearly every machine:

     serif       Georgia, "Times New Roman", "Palatino Linotype"
     sans        Verdana, Tahoma, Arial, "Trebuchet MS", "Segoe UI"
     monospace   "Courier New", Consolas, "Lucida Console"
   ========================================================== */

:root {
  --font-display: Georgia, "Hoefler Text", "Times New Roman", serif;
  --font-body:    "Lucida Grande", "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
  --font-label:   Verdana, Arial, sans-serif;
  --font-mono:    "Courier New", monospace;
}

/* ---------- reset-ish ---------- */
html, body, div, p, ul, ol, li, dl, dt, dd, table, h1, h2 {
  margin: 0; padding: 0;
}
ul { list-style: none; }
table { border-collapse: collapse; }
img { border: 0; vertical-align: bottom; }

/* ---------- page ---------- */
body {
  background: #f7f4ed url("img/bg_seigaiha.svg") repeat;
  color: #3b3a35;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.75;
  text-align: center;
  padding: 14px 0 28px;
  -webkit-font-smoothing: antialiased;
}

#wrap {
  width: 824px;
  margin: 0 auto;
  text-align: left;
  background: #fffdf8;
  border: 1px solid #cfc7b4;
  box-shadow: 0 1px 0 #e6dfd0;
}

a         { color: #3b5b8c; text-decoration: none; }
a:hover   { color: #b5543f; text-decoration: underline; }
a:visited { color: #6b5a84; }

b  { font-weight: bold; }
em { font-style: normal; }
i  { font-style: normal; }

/* ---------- utility bar ---------- */
.utilbar {
  font-size: 10px;
  color: #8a8372;
  background: #f1ece0;
  border-bottom: 1px solid #ddd5c3;
  padding: 3px 10px;
  overflow: hidden;
  line-height: 1.6;
}
.utilbar .util-l { float: left; letter-spacing: 0.04em; }
.utilbar .util-r { float: right; }
.utilbar a { color: #6f6757; }

/* ---------- header ---------- */
.header { position: relative; }
.header img { display: block; }

.header-title {
  position: absolute;
  left: 22px;
  top: 18px;
  color: #fffdf8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.header-title .mark {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-weight: normal;
}
/* the middle word of the wordmark picks up the accent */
.header-title .mark em { color: #e3a892; font-style: normal; }
.header-title .rule {
  display: block;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: #d8cdb8;
  margin-top: 3px;
}
.header-title .sub {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #c3bba8;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 4px;
}

/* ---------- global nav ---------- */
.gnav {
  display: table;
  table-layout: fixed;
  width: 100%;
  background: #f1ece0;
  border-bottom: 1px solid #cfc7b4;
}
.gnav a {
  display: table-cell;
  text-align: center;
  padding: 6px 0 5px;
  border-right: 1px solid #ddd5c3;
  color: #4a443a;
  line-height: 1.3;
}
.gnav a:last-child { border-right: 0; }
.gnav a b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.03em;
}
.gnav a i { display: block; font-size: 8px; letter-spacing: 0.22em; color: #9b9383; }
.gnav a:hover { background: #fffdf8; text-decoration: none; color: #b5543f; }
.gnav a:hover i { color: #c08a78; }
.gnav a.on {
  background: #fffdf8;
  border-bottom: 2px solid #b5543f;
  margin-bottom: -1px;
}
.gnav a.on b { color: #b5543f; }

/* ---------- breadcrumb / ticker ---------- */
.crumbs {
  font-size: 10px;
  color: #8a8372;
  padding: 4px 10px;
  border-bottom: 1px solid #e8e1d1;
  overflow: hidden;
  white-space: nowrap;
}
.crumbs .path { float: left; letter-spacing: 0.1em; }
/* the ticker takes whatever room is left beside HOME and clips at its edge */
.crumbs .ticker {
  display: block;
  overflow: hidden;
  margin-left: 16px;
  color: #9b9383;
}
.crumbs .ticker #statusline { color: #b5543f; }

/* ---------- columns ---------- */
/* table-layout:fixed is what keeps these honest. Left to itself a
   table hands a cell more room whenever its contents do not fit,
   taking it from the columns beside it - which is why the sidebar
   used to be a different width on nearly every page. Fixed means the
   widths below are the widths, whatever is put in them.

   The widths include padding and border, because of box-sizing.
       197 + 430 + 197 = 824        three columns, the home page
       197 + 627       = 824        two columns, everywhere else   */

#cols {
  width: 824px;
  table-layout: fixed;
}

#cols > tbody > tr > td { box-sizing: border-box; }

.col-l    { width: 197px; border-right: 1px solid #e8e1d1; padding: 10px; }
.col-c    { width: 430px; padding: 10px; }
.col-r    { width: 197px; border-left: 1px solid #e8e1d1; padding: 10px; }
.col-wide { width: 627px; padding: 10px; }

/* nothing in a box may push its column about */
.mod-b img, .decor img { max-width: 100%; }
/* the 200x40 link-me banner is wider than the side column; shrink it
   evenly rather than squashing it narrower at full height */
.mod-b img.linkme { height: auto; }

/* ---------- module boxes ---------- */
.mod {
  border: 1px solid #ded6c4;
  background: #fffdf8;
  margin-bottom: 10px;
}
/* only the last box in a column loses its gap - a .mod that is the lone
   child of a JS mount point must keep one */
.col-l > .mod:last-child,
.col-c > .mod:last-child,
.col-r > .mod:last-child,
.col-wide > .mod:last-child { margin-bottom: 0; }

.mod-h {
  background: #f4efe4;
  border-bottom: 1px solid #ded6c4;
  border-left: 3px solid #b5543f;
  padding: 3px 7px;
  line-height: 1.5;
  overflow: hidden;
}
.mod-h b {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8a7a62;
}
.mod-h span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: #6a6355;
  margin-left: 5px;
}
.mod-h .mod-more {
  float: right;
  font-size: 10px;
  color: #7b7363;
}

.mod-b { padding: 8px 9px; }
.mod-b.center { text-align: center; }
.mod-b p { margin-bottom: 7px; }
.mod-b p:last-child { margin-bottom: 0; }

.lead {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #2f2e2a;
  border-bottom: 1px dotted #ded6c4;
  padding-bottom: 6px;
}

.note {
  font-size: 10px;
  color: #8a8372;
  line-height: 1.7;
}

.en-note {
  display: block;
  font-size: 10px;
  color: #9b9383;
  font-family: var(--font-label);
  letter-spacing: 0.02em;
}

/* ---------- NEW tag ---------- */
.tag-new {
  display: inline-block;
  background: #b5543f;
  color: #fffdf8;
  font-size: 8px;
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding: 0 3px;
  vertical-align: 1px;
  margin-left: 3px;
}

/* ---------- left menu ---------- */
.menu li {
  border-bottom: 1px dotted #e2dac8;
  font-size: 11px;
}
.menu li:last-child { border-bottom: 0; }
.menu a {
  display: block;
  padding: 4px 2px 4px 20px;
  position: relative;
  color: #4a443a;
}
/* the icon stands where the little square marker used to */
.menu a .mico {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  opacity: 0.85;
}

.menu a:hover .mico { opacity: 1; }
.menu a:hover { background: #f6f1e6; color: #b5543f; text-decoration: none; }

/* second-level entries sit inside their parent section */
.menu li.sub a { padding-left: 32px; color: #6a6355; }
.menu li.sub a:before { content: "\2013"; position: absolute; left: 22px; color: #c3b89f; font-size: 10px; }
.menu a em {
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
  margin-left: 3px;
}

/* ---------- profile spec list ---------- */
.spec { font-size: 10px; overflow: hidden; margin-bottom: 6px; }
.spec dt {
  float: left;
  clear: left;
  width: 42px;
  color: #8a7a62;
  border-bottom: 1px dotted #e2dac8;
  padding: 2px 0;
}
.spec dd {
  margin-left: 46px;
  border-bottom: 1px dotted #e2dac8;
  padding: 2px 0;
  color: #4a443a;
}

/* ---------- counter ---------- */
.counter {
  display: inline-block;
  background: #2f3545;
  color: #d8cdb8;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  padding: 3px 4px 3px 7px;
  border: 1px solid #1f2430;
  margin-bottom: 4px;
}

/* ---------- update log ---------- */
.log dt {
  float: left;
  clear: left;
  width: 62px;
  font-family: var(--font-label);
  font-size: 10px;
  color: #8a7a62;
  padding: 4px 0;
  letter-spacing: 0.02em;
}
.log dd {
  margin-left: 68px;
  padding: 4px 0;
  border-bottom: 1px dotted #e2dac8;
  font-size: 11px;
}
.log dd:last-child { border-bottom: 0; }

/* ---------- photo grid ---------- */
.grid td {
  padding: 0 7px 0 0;
  text-align: center;
  vertical-align: top;
}
.grid td:last-child { padding-right: 0; }
.grid img {
  border: 1px solid #ded6c4;
  padding: 2px;
  background: #fffdf8;
}
.grid a:hover img { border-color: #b5543f; background: #f6f1e6; }
.cap {
  display: block;
  font-size: 10px;
  color: #4a443a;
  line-height: 1.5;
  margin-top: 3px;
}
.cap em {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
}
.cap i {
  display: block;
  font-size: 9px;
  color: #b3ab99;
  font-family: var(--font-label);
}

.more-line {
  text-align: right;
  font-size: 10px;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dotted #e2dac8;
}

/* ---------- works table ---------- */
.works th, .works td {
  border-bottom: 1px dotted #e2dac8;
  padding: 5px 4px;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}
.works tr:last-child th, .works tr:last-child td { border-bottom: 0; }
.works th { width: 112px; font-size: 11px; color: #2f2e2a; }
.works th em {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
}
.works td { font-size: 10px; color: #6a6355; line-height: 1.6; }
.works td.pct { width: 62px; text-align: right; white-space: nowrap; }
.works .bar {
  display: block;
  height: 4px;
  background: #ece5d6;
  border: 1px solid #ded6c4;
  margin-bottom: 2px;
}
.works .bar i {
  display: block;
  height: 4px;
  background: #8a9c82;
}
.works td.pct b {
  font-family: var(--font-label);
  font-size: 9px;
  color: #8a7a62;
}
.works tr.done .bar i { background: #b5543f; }
.works tr.done td.pct b { color: #b5543f; }

/* ---------- bbs list ---------- */
.bbs li {
  border-bottom: 1px dotted #e2dac8;
  padding: 4px 0;
  font-size: 11px;
}
.bbs li:last-child { border-bottom: 0; }
.bbs li span {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
}

/* ---------- link list ---------- */
.links li {
  border-bottom: 1px dotted #e2dac8;
  padding: 4px 0;
  font-size: 11px;
}
.links li:last-child { border-bottom: 0; }
.links li em {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
}

/* ---------- button ---------- */
.btn {
  font-family: inherit;
  font-size: 11px;
  color: #4a443a;
  background: #f4efe4;
  border: 1px solid #cfc7b4;
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
}
.btn:hover { background: #fffdf8; border-color: #b5543f; color: #b5543f; }
.btn:active { background: #ece5d6; }

/* ---------- webring ---------- */
.ringnav { font-size: 10px; color: #c3b89f; }

/* ---------- footer ---------- */
.footer {
  clear: both;
  border-top: 1px solid #cfc7b4;
  background: #f1ece0;
  padding: 9px 10px 11px;
  text-align: center;
}
.fnav { font-size: 10px; color: #c3b89f; margin-bottom: 5px; }
.fnav a { color: #6f6757; margin: 0 1px; }
.fnote {
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* ==========================================================
   GALLERY  (photos.html)
   ========================================================== */


/* ---------- how-to list ---------- */
ol.howto {
  margin: 0 0 7px 0;
  padding-left: 18px;
  font-size: 11px;
  color: #4a443a;
}
ol.howto li {
  list-style: decimal;
  padding: 1px 0;
}

/* ---------- thumbnail grid ---------- */
ul.gallery { overflow: hidden; }

/* three to a row, captions centred underneath */
ul.gallery li {
  display: inline-block;
  vertical-align: top;
  width: 186px;
  margin: 0 12px 14px 0;
  text-align: center;
}
ul.gallery li:nth-child(3n) { margin-right: 0; }

ul.gallery a {
  display: block;
  color: #4a443a;
}
ul.gallery a:hover { text-decoration: none; }

ul.gallery img {
  display: block;
  width: 180px;
  height: 180px;
  border: 1px solid #ded6c4;
  padding: 2px;
  background: #fffdf8;
}
ul.gallery a:hover img { border-color: #b5543f; background: #f6f1e6; }

ul.gallery .cap {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  padding: 4px 1px 0;
  margin-top: 4px;
}
ul.gallery a:hover .cap { color: #b5543f; }
ul.gallery .cap i {
  display: block;
  font-size: 9px;
  color: #b3ab99;
  font-family: var(--font-label);
}

/* the caption is the blog's browser tab turned upside down: the title
   hangs beneath the photo on a tab */
ul.gallery .cap {
  width: 78%;
  margin: 0 auto;
  padding: 5px 8px 6px;
  background: #e9e4da;
  border: 1px solid #c9bfa9;
  border-top: 0;
  border-radius: 0 0 9px 9px;
}

/* on hover a 2px red outline runs round the photo and down round its tab;
   the tab rises 2px over the photo's bottom edge so the two read as one
   shape. Padding drops by the extra border so nothing shifts. */
ul.gallery a:hover img,
ul.gallery a:hover .noshot { border: 2px solid #b5543f; padding: 1px; }
ul.gallery a:hover .cap {
  position: relative;
  top: -2px;
  background: #f6f1e6;
  border: 2px solid #b5543f;
  border-top: 0;
  padding: 5px 7px 5px;
}

/* the month count sits in the header's right-hand slot */
.mod-h span.mod-more {
  font-family: var(--font-label);
  font-style: normal;
  font-size: 9px;
  color: #9b9383;
  margin-left: 0;
}

/* ==========================================================
   VIEWER  (the lightbox)
   ========================================================== */

#viewer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(27, 34, 53, 0.88);
  z-index: 100;
  text-align: center;
}
#viewer.on { display: block; }

.viewer-inner {
  display: inline-block;
  margin: 28px auto;
  max-width: 92%;
  background: #fffdf8;
  border: 1px solid #8a8372;
  text-align: left;
}

.viewer-bar {
  background: #f1ece0;
  border-bottom: 1px solid #ded6c4;
  padding: 3px 8px;
  overflow: hidden;
  font-size: 10px;
  color: #8a7a62;
  font-family: var(--font-label);
}
.viewer-bar .v-count { float: left; letter-spacing: 0.1em; }
.viewer-bar .v-close { float: right; color: #6f6757; }
.viewer-bar .v-close:hover { color: #b5543f; }

.viewer-stage {
  padding: 10px;
  background: #2f3545;
  text-align: center;
  line-height: 0;
}
.viewer-stage img {
  max-width: 76vw;
  max-height: 72vh;
  border: 1px solid #1f2430;
}

.viewer-foot {
  background: #f4efe4;
  border-top: 1px solid #ded6c4;
  padding: 5px 8px;
  overflow: hidden;
  text-align: center;
}
.viewer-foot .v-prev { float: left; font-size: 11px; }
.viewer-foot .v-next { float: right; font-size: 11px; }
.viewer-foot .v-cap b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: normal;
  color: #2f2e2a;
}
.viewer-foot .v-cap i {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
  letter-spacing: 0.04em;
}

/* ==========================================================
   NOTICE TICKER  -  scrolls round and round
   ========================================================== */

#statusline {
  display: block;
}

#statusline .tick-win {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

#statusline .tick-run {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;           /* starts just off the right-hand edge */
  animation-name: tick;
  animation-duration: 16s;      /* script.js retimes this by length */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  #statusline .tick-run { padding-left: 0; animation: none; }
}

/* ==========================================================
   DECOR  -  sidebar pictures from img/decor/
   ========================================================== */

.decor {
  position: relative;
  border: 1px solid #ded6c4;
  background: #fffdf8;
  margin-bottom: 10px;
  padding: 8px;
  text-align: center;
  line-height: 0;
}

.decor img {
  display: block;
  margin: 0 auto;
  border: 1px solid #e8e1d1;
  background: #fffdf8;
}

/* the little plaque in the bottom-left corner of the picture */
.decor-tag {
  position: absolute;
  left: 9px;
  bottom: 9px;
  display: block;
  width: 72px;
  height: 18px;
  border: 0;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

/* ==========================================================
   BANNER GRAPHIC  -  pixel Juno on the right of the header
   Built from Website decor/juno6-pixel.png, which is the
   photograph reduced to a 123x34 grid of 32 colours.

   It bobs. The movement steps in whole pixels rather than
   gliding, so it stays honest to the pixel grid - a sprite
   floating, not a photo sliding about.
   ========================================================== */

.header-synth {
  position: absolute;
  right: 16px;
  top: 18px;
  width: 246px;
  height: 69px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  animation: hs-bob 2.4s steps(1, end) infinite;
}

@keyframes hs-bob {
  0%,   15.9%  { transform: translateY(0);     }
  16%,  32.9%  { transform: translateY(-1px);  }
  33%,  49.9%  { transform: translateY(-2px);  }
  50%,  66.9%  { transform: translateY(-3px);  }
  67%,  83.9%  { transform: translateY(-2px);  }
  84%,  100%   { transform: translateY(-1px);  }
}

@media (prefers-reduced-motion: reduce) {
  .header-synth { animation: none; }
}

.header-synth img {
  display: block;
  width: 246px;
  height: 69px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* ==========================================================
   BLOG  (blogs.html)
   ========================================================== */

.mod.entry { margin-bottom: 5px; }
.mod.entry.open { margin-bottom: 12px; }

.mod-h.entry-h {
  padding: 5px 8px;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mod-h.entry-h:hover { background: #efe8da; }
.mod-h.entry-h:hover b { color: #b5543f; }

.mod.entry.open > .mod-h.entry-h { border-bottom: 1px solid #ded6c4; }

/* the little triangle in front of the title */
.mod-h.entry-h .tw {
  display: inline-block;
  width: 13px;
  font-family: var(--font-label);
  font-size: 9px;
  color: #b5543f;
  vertical-align: 1px;
}

.mod-h.entry-h b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.01em;
  color: #2f2e2a;
  text-transform: none;
  float: left;
}

.mod-h.entry-h .entry-date {
  float: right;
  font-family: var(--font-label);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #9b9383;
  margin: 4px 0 0 10px;
}

/* ---------- blog page only: titles as browser tabs ----------
   (the project page shares these classes, hence the #blog-mount)
   Each title is a rounded tab sitting on a vermilion line; opening
   it turns the tab paper-white, like the active tab. */
#blog-mount .mod.entry {
  border: 0;
  border-bottom: 2px solid #b5543f;
  background: transparent;
  margin-bottom: 8px;
}

#blog-mount .mod-h.entry-h {
  width: 70%;
  padding: 7px 14px;
  background: #e9e4da;
  border: 1px solid #c9bfa9;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

#blog-mount .mod-h.entry-h:hover { background: #f4efe4; }

#blog-mount .mod-h.entry-h .entry-date { margin-top: 4px; }

/* a little solid arrow with rounded corners in front of each title
   (drawn as an image, so the ">" in the markup is hidden). It nudges
   forward on hover and points down when the entry is open. */
#blog-mount .mod-h.entry-h .tw {
  width: 9px;
  height: 11px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
  font-size: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.2 1.1Q1 0.4 1 1.8V10.2Q1 11.6 2.2 10.9L9 6.9Q10.2 6 9 5.1Z' fill='%23b5543f'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.15s;
}
#blog-mount .mod.entry:not(.open) .mod-h.entry-h:hover .tw { transform: translateX(2px); }
#blog-mount .mod.entry.open .tw { transform: rotate(90deg); }

/* opened: the tab becomes the active tab, outlined in red, and its
   outline carries on round the text as one frame. The tab sits 2px
   over the frame's top edge so the line only shows to its right. */
#blog-mount .mod.entry.open > .mod-h.entry-h {
  position: relative;
  z-index: 1;
  margin-bottom: -2px;
  padding: 6px 13px 9px;
  background: #fffdf8;
  border: 2px solid #b5543f;
  border-bottom: 0;
}

#blog-mount .mod.entry .entry-body {
  background: #fffdf8;
  border-top: 2px solid #b5543f;
  border-left: 2px solid #b5543f;
  border-right: 2px solid #b5543f;
}

.entry-body { padding: 10px 12px 8px; }

.entry-body p {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 11px;
  color: #3b3a35;
}

/* first line of an entry gets a little weight, like a drop-in */
.entry-body p:first-child { color: #2f2e2a; }

.entry-body .entry-foot {
  margin: 0;
  padding-top: 7px;
  border-top: 1px dotted #e2dac8;
  font-family: var(--font-label);
  font-size: 9px;
  color: #b3ab99;
  text-align: right;
}

/* ==========================================================
   UPDATE box on the home page
   Holds its height whether there are five entries or one, so
   the middle column does not shuffle about as the blog grows.
   ========================================================== */

.update-box {
  min-height: 196px;
}

.update-box .log dd a {
  font-size: 11px;
  color: #3b5b8c;
}
.update-box .log dd a:hover { color: #b5543f; }

/* ==========================================================
   JUKEBOX CONTROLS
   Transport buttons with a bit of weight to them - bevelled
   top highlight, a shadow underneath, and they sink when
   pressed, the way a hi-fi button ought to.
   ========================================================== */

.jb-row {
  margin: 7px 0 9px 0;
  font-size: 0;              /* closes the gaps between the buttons */
  text-align: center;
}

.jb-btn {
  display: inline-block;
  height: 28px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  border: 1px solid #b0a690;
  border-radius: 2px;
  background: #ece5d6;
  background: linear-gradient(#fffdf8 0%, #f3ede0 52%, #e7dfcd 100%);
  color: #4a443a;
  font-family: var(--font-label);
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fffefb,
              inset 0 -1px 0 rgba(0, 0, 0, 0.05),
              0 1px 0 #d6cdb9;
}

.jb-side {
  width: 30px;
  font-size: 11px;
  color: #6f6757;
}

.jb-play {
  width: 70px;
  margin: 0 2px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.09em;
}

.jb-btn:hover {
  color: #b5543f;
  border-color: #b5543f;
  background: linear-gradient(#fffdf8 0%, #f7ece6 52%, #f0ddd4 100%);
}

.jb-btn:active {
  background: #e7dfcd;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.17);
  padding-top: 1px;          /* the press */
}

.jb-btn[disabled],
.jb-btn[disabled]:hover {
  color: #c3bba8;
  border-color: #ded6c4;
  background: #f5f1e7;
  box-shadow: inset 0 1px 0 #fffefb;
  cursor: default;
}

/* ---------- volume ---------- */
.jb-vol {
  margin: 0;
  text-align: center;
  line-height: 0;
}

#volslider {
  width: 120px;
  height: 14px;
  vertical-align: middle;
  accent-color: #b5543f;
  cursor: pointer;
}

/* ---------- visualiser ---------- */
.jb-vis {
  display: block;
  width: 136px;
  height: 38px;
  margin: 0 auto 2px;
  background: #1c1916;
  /* a bezel, so it sits in the panel like a real meter window */
  border: 1px solid;
  border-color: #908774 #cfc7b4 #cfc7b4 #908774;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.55), 0 1px 0 #fffdf8;
}

/* ==========================================================
   FORMS  (contact.html)
   ========================================================== */

table.form { width: 100%; }

table.form th {
  width: 86px;
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
  font-size: 11px;
  color: #6a6355;
  padding: 4px 8px 4px 0;
  white-space: nowrap;
}

table.form td { padding: 4px 0; }

.fld {
  font-family: inherit;
  font-size: 12px;
  color: #3b3a35;
  background: #fffdf8;
  border: 1px solid #c3b89f;
  border-top-color: #a9a08c;
  border-left-color: #a9a08c;
  padding: 3px 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

input.fld, select.fld { height: 24px; }
input.fld { width: 100%; box-sizing: border-box; }
select.fld { padding: 2px; }

textarea.fld {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
  resize: vertical;
}

.fld:focus {
  outline: none;
  border-color: #b5543f;
  background: #fffefb;
}

.form-note {
  margin-left: 10px;
  font-size: 10px;
  color: #8a8372;
}
.form-note.bad { color: #b5543f; }

/* wider numbered list, for the content column */
ol.howto.wide {
  font-size: 12px;
  line-height: 1.8;
  padding-left: 22px;
}
ol.howto.wide li { padding: 2px 0; }

/* ---------- jukebox: track name and the visualiser warning ---------- */
.jb-now {
  margin: 3px 0 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #4a443a;
  text-align: center;
  min-height: 14px;          /* holds its place when nothing is playing */
}

.jb-now i {
  font-style: normal;
  color: #b5543f;
}

.jb-warn {
  margin: 1px 0 0 0;
  font-size: 9px;
  line-height: 1.3;
  color: #9b9383;
  text-align: center;
}

/* ==========================================================
   PROJECTS  (electronics.html and project.html)
   ========================================================== */

/* placeholder when a project folder has no picture */
ul.gallery .noshot {
  display: block;
  width: 180px;
  height: 180px;
  border: 1px solid #ded6c4;
  padding: 2px;
  background: #f4efe4;
  color: #b3ab99;
  font-size: 10px;
  line-height: 180px;
  text-align: center;
}
ul.gallery .noshot br { display: none; }

/* a project that is a web page rather than a photographed build */
ul.gallery .noshot.isweb {
  background: #2f3545;
  color: #d8cdb8;
  border-color: #1f2430;
  letter-spacing: 0.12em;
}

/* ---------- the write-up ---------- */
.project-body { padding: 12px 14px 8px; }

.project-body p {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 11px;
  color: #3b3a35;
}

.project-body .doc-h {
  font-family: var(--font-display);
  font-weight: normal;
  color: #2f2e2a;
  margin: 18px 0 7px 0;
  padding-bottom: 4px;
  border-bottom: 1px dotted #ded6c4;
}
.project-body h2.doc-h { font-size: 17px; }
.project-body h3.doc-h { font-size: 14px; border-bottom: 0; margin-bottom: 4px; }
.project-body h4.doc-h {
  font-size: 12px;
  border-bottom: 0;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  color: #6a6355;
}
.project-body .doc-h:first-child { margin-top: 0; }

/* "spec sheet" titles: Word's Title is the big heading over a red
   rule, and Heading 1 under it reads as a small spaced-caps subtitle */
.project-body .doc-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.35;
  color: #2f2e2a;
  margin: 4px 0 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #b5543f;
}
.project-body h2.doc-h {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8272;
  border-bottom: 0;
  margin: 9px 0 12px;
  padding-bottom: 0;
}

.project-body .doc-list {
  margin: 0 0 12px 0;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.8;
}
.project-body ul.doc-list li { list-style: square; padding: 1px 0; }
.project-body ol.doc-list li { list-style: decimal; padding: 1px 0; }

.project-body .doc-quote {
  margin: 0 0 12px 0;
  padding: 6px 0 6px 12px;
  border-left: 3px solid #ded6c4;
  color: #6a6355;
  font-family: var(--font-display);
  font-size: 13px;
}

/* pictures that came out of the Word document */
.project-body .doc-img {
  margin: 14px 0;
  text-align: center;
}
.project-body .doc-img img {
  max-width: 100%;
  border: 1px solid #ded6c4;
  padding: 3px;
  background: #fffdf8;
}

/* text centred or right-aligned in Word */
.project-body .al-center { text-align: center; }
.project-body .al-right  { text-align: right; }

/* a button from Word (a one-cell shaded table holding a link);
   its background colour comes from the document */
.project-body .doc-btnrow { margin: 6px 0 14px; text-align: center; line-height: 1; }
.project-body .doc-btn {
  display: inline-block;
  min-width: 120px;
  padding: 7px 12px;
  border-radius: 3px;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.project-body .doc-btn:hover { color: #ffffff; text-decoration: none; filter: brightness(1.15); }
/* a button linked to just "#" in Word: looks the same, does nothing yet */
.project-body .doc-btn-soon { cursor: default; }
.project-body .doc-btn-soon:hover { filter: none; }

/* a table from Word: columns of pictures, captions and buttons */
.project-body .doc-table-wrap { margin: 4px 0 16px; overflow-x: auto; }
.project-body .doc-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.project-body .doc-table td { padding: 0 4px; text-align: left; }
.project-body .doc-table img { max-width: 100%; height: auto; }
.project-body .doc-table p { margin: 4px 0 6px; font-size: 11px; line-height: 1.4; }
.project-body .doc-table .doc-list { margin: 2px 0 8px; font-size: 11px; line-height: 1.6; }

/* a table that had lines in Word, e.g. a chart */
.project-body .doc-grid td { padding: 8px 12px; border: 1px solid #ded6c4; background: #fffdf8; }
.project-body .doc-table .doc-btnrow { margin: 0 0 5px; }
.project-body .doc-table .doc-btn { display: block; min-width: 0; padding: 6px 4px; font-size: 9px; letter-spacing: 0.04em; }

/* current project in the side list */
.bbs li.on a { color: #b5543f; font-weight: bold; }
.bbs li.on { background: #f6f1e6; }

/* ---------- html dropped into a project folder ---------- */
/* each one is a link that opens in a new tab */

.doc-link {
  margin: 0 0 8px 0;
  padding: 9px 11px;
  border: 1px solid #ded6c4;
  border-left: 3px solid #b5543f;
  background: #f9f6ef;
}

.doc-link a {
  font-family: var(--font-display);
  font-size: 14px;
  color: #3b5b8c;
}
.doc-link a:hover { color: #b5543f; }

.doc-link span {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-family: var(--font-label);
  color: #9b9383;
  letter-spacing: 0.04em;
}

/* ==========================================================
   TOP FIVE  -  the albums box on the home page
   ========================================================== */

ol.albums {
  margin: 0;
  padding: 0;
  text-align: left;
}

ol.albums li {
  position: relative;
  padding: 4px 0 4px 18px;
  border-bottom: 1px dotted #e2dac8;
  font-size: 11px;
  line-height: 1.45;
  list-style: none;
}
ol.albums li:last-child { border-bottom: 0; }

ol.albums .n {
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  font-family: var(--font-label);
  font-size: 10px;
  color: #b5543f;
}

ol.albums em {
  display: block;
  font-size: 9px;
  color: #9b9383;
  font-family: var(--font-label);
}

/* ==========================================================
   NEIGHBORS  -  other people's banners, comments page
   ========================================================== */

.nb-row {
  text-align: left;
  line-height: 0;
}

.nb {
  display: inline-block;
  margin: 0 4px 4px 0;
  vertical-align: top;
}

.nb img {
  display: block;
  max-width: 100%;
  border: 1px solid #ded6c4;
  /* most of these are pixel art; keep them crisp */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

a.nb:hover img { border-color: #b5543f; }

/* a neighbor with no banner gets a plain 88x31 button with its name */
.nb-text {
  display: block;
  width: 86px;
  height: 29px;
  border: 1px solid #ded6c4;
  background: #f7f4ed;
  color: #4a443a;
  font-family: var(--font-label);
  font-size: 9px;
  line-height: 29px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

a.nb:hover .nb-text { border-color: #b5543f; color: #b5543f; }

/* ==========================================================
   LIVE CHAT  -  Dr. Robot, contact page
   He is full-colour pixel art (colours in bot.js) with hard
   edges and a hard shadow on his speech bubbles like an old
   game's dialog box.
   The visitor's side stays in the site's own palette.
   ========================================================== */

.bot { overflow: hidden; margin-bottom: 6px; }

.bot-face {
  float: left;
  width: 106px;
  text-align: center;
}

.bot-screen {
  display: inline-block;
  padding: 3px;
  border: 2px solid #111111;
  background: #ffffff;
  line-height: 0;
  box-shadow: 2px 2px 0 #111111;
}

.bot-screen canvas {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.bot-plate {
  margin: 6px 0 0;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: #2f2e2a;
  visibility: hidden;   /* shown by bot.js once he has risen */
}

.bot-chat { margin-left: 116px; }

/* the chat window, with the BEGIN button laid over it until clicked */
.bot-window { position: relative; }

.bot-start {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(247, 244, 237, 0.85);
  text-align: center;
}

.bot-begin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 34px;
  margin: -17px 0 0 -85px;
  border: 2px solid #111111;
  background: #ffffff;
  color: #111111;
  box-shadow: 3px 3px 0 #111111;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.bot-begin:hover { background: #111111; color: #ffffff; }

/* pressed: it sinks into its shadow */
.bot-begin:active {
  box-shadow: none;
  margin: -14px 0 0 -82px;
}

.bot-log {
  height: 210px;
  overflow-y: auto;
  padding: 8px 8px 2px;
  border: 1px solid #ded6c4;
  background: #f7f4ed;
  text-align: left;
}

.bot-msg { margin: 0 0 8px; }
.bot-u { text-align: right; }

.bot-bubble {
  position: relative;
  display: inline-block;
  max-width: 80%;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
}

.bot-r .bot-bubble {
  margin-left: 6px;
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  font-family: var(--font-mono);
}

/* the little tail pointing back at him */
.bot-r .bot-bubble:before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-color: #111111;
}

.bot-thinking { color: #9b9383; letter-spacing: 0.2em; }

.bot-u .bot-bubble {
  background: #fffdf8;
  color: #4a443a;
  border: 1px solid #ded6c4;
  border-right: 3px solid #b5543f;
}

.bot-opts { margin: -2px 0 8px 6px; }

.bot-opt {
  margin: 0 4px 4px 0;
  padding: 2px 7px;
  border: 1px solid #111111;
  background: #ffffff;
  color: #111111;
  font-family: var(--font-label);
  font-size: 10px;
  cursor: pointer;
}

.bot-opt:hover { background: #111111; color: #ffffff; }

table.bot-row { width: 100%; margin-top: 6px; }
table.bot-row td { padding: 0; }
table.bot-row td.bot-go { width: 1%; padding-left: 6px; }
table.bot-row input.fld { width: 100%; box-sizing: border-box; }

/* ==========================================================
   GUESTBOOK
   ========================================================== */

.gb-entry {
  padding: 9px 0 3px;
  border-bottom: 1px dotted #e2dac8;
}
.gb-entry:last-child { border-bottom: 0; }
.gb-entry:first-child { padding-top: 0; }

.gb-head {
  margin-bottom: 5px !important;
  overflow: hidden;
}
.gb-head b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: normal;
  color: #2f2e2a;
  float: left;
}
.gb-head i {
  float: right;
  font-style: normal;
  font-family: var(--font-label);
  font-size: 9px;
  color: #9b9383;
  margin-top: 4px;
}

#gb-mount .mod-b p {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* the honeypot: a real person never sees it, a bot fills it in */
.gb-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the little delete cross, only drawn when you are signed in as admin */
.gb-del {
  float: right;
  margin: 2px 0 0 8px;
  font-size: 11px;
  color: #c3b89f;
  text-decoration: none;
}
.gb-del:hover { color: #b5543f; }

/* ==========================================================
   RETRO TEXT FIELDS
   The sunken box every program had in 1999: a dark line down
   the top and left, a light one down the bottom and right,
   so the field looks pressed into the panel.
   ========================================================== */

.fld.retro {
  background: #ffffff;
  color: #000000;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 4px;
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #fdfdfd #fdfdfd #808080;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #3f3f3f,
              inset -1px -1px 0 #d8d4cc;
}

.fld.retro::placeholder { color: #9a9a9a; font-style: italic; }

.fld.retro:focus {
  outline: none;
  background: #ffffe8;                  /* the old "this one is active" tint */
  border-color: #5a5a5a #fdfdfd #fdfdfd #5a5a5a;
}

textarea.fld.retro {
  line-height: 1.55;
  resize: vertical;
}

/* a dropdown wants the system face, not Courier - that is how the
   old ones looked, and the option list is drawn by the OS anyway */
select.fld.retro {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  padding: 2px 3px;
  height: 24px;
  background: #ffffff;
}

select.fld.retro:focus { background: #ffffe8; }

/* the single-line boxes read better a touch taller with Courier in them */
input.fld.retro { height: 25px; }

/* a label with its value underneath, for anything too long to sit
   beside it - a full e-mail address in a 156px column, say */
.spec-stack {
  margin: 0 0 7px 0;
  padding-bottom: 6px;
  border-bottom: 1px dotted #e2dac8;
  font-size: 10px;
  line-height: 1.6;
}

.spec-stack span {
  display: block;
  color: #8a7a62;
}

.spec-stack a {
  display: block;
  /* 9px keeps a 29-character address on one line whichever font the
     visitor actually has - Verdana is the widest of the fallbacks and
     needs 148px of the 156 available. The wrapping below is only a
     safety net for something wider still. */
  font-size: 9px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* ==========================================================
   FORM BUTTONS  -  flat, square, in the site's own blue

   Still the 1998 shape: four border tones, no gradient, and
   the whole thing sinks when pressed. The face is #3b5b8c,
   the slate blue already used for every link on the site, so
   it sits with the cream and vermilion rather than against
   them. A brighter blue looked borrowed from another page.

   These rules come last on purpose, so they beat the rounded
   jukebox button style the markup also carries.
   ========================================================== */

.c-send {
  background: #3b5b8c;
  background-image: none;
  color: #fffdf8;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 4px 16px;
  height: auto;
  border: 1px solid;
  border-color: #8aa3c4 #1b2a42 #1b2a42 #8aa3c4;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #273c5c,
              inset  1px  1px 0 #6e8cb5;
  cursor: pointer;
}

.c-send:hover {
  background: #46689c;
  color: #fffdf8;
  border-color: #9bb2cf #1b2a42 #1b2a42 #9bb2cf;
  box-shadow: inset -1px -1px 0 #273c5c,
              inset  1px  1px 0 #7e9cc3;
}

.c-send:active {
  background: #334e78;
  color: #fffdf8;
  border-color: #1b2a42 #8aa3c4 #8aa3c4 #1b2a42;
  box-shadow: inset  1px  1px 0 #273c5c,
              inset -1px -1px 0 #6e8cb5;
  padding: 5px 15px 3px 17px;      /* the label sinks with the button */
}

.c-send[disabled],
.c-send[disabled]:hover {
  background: #a6adbb;
  color: #eceff4;
  border-color: #c9cfd9 #6a7384 #6a7384 #c9cfd9;
  box-shadow: inset -1px -1px 0 #7a8395,
              inset  1px  1px 0 #c2c8d3;
  cursor: default;
}

/* ==========================================================
   PAGE NOT FOUND  -  404.html, scene drawn by lost.js
   Dr. Robot wandering along a plain strip, on a ground line.
   ========================================================== */
.lost-scene {
  position: relative;
  height: 92px;
  overflow: hidden;
  border-bottom: 2px solid #ded6c4;
  margin-bottom: 12px;
}
.lost-scene canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.lost-lead { margin-bottom: 8px; }
.lost-path { word-break: break-all; color: #b5543f; }