/* Based on Tufte CSS. */

body {
  width: 90%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  /* padding-left: 50px; */
  /* padding-right: 50px; */
}

/* Font families. */

body {
  font-family:
    "Hiragino Kaku Gothic Pro", /* macOS/iOS: clean, modern sans */
    "ヒラギノ角ゴ Pro W3",	/* Mac native Japanese */
    "Meiryo",                   /* Windows default sans-serif */
    "メイリオ",			/* Windows native Japanese */
    "Yu Gothic",                /* Windows 10+, modern Gothic */
    "游ゴシック体",		/* Windows native Japanese */
    "Noto Sans JP",             /* Web font, Google Fonts, Android */
    "ＭＳ Ｐゴシック",		/* MS PGothic fallback */
    "MS PGothic",
    "Osaka",                    /* Classic macOS */
    "TakaoExGothic",            /* Linux */
    "IPAexGothic",              /* Linux / custom installs */
    sans-serif;                 /* General Latin fallback */
}

h1 #thomas-morgan {
  font-family: "Cabin Sketch";
}

h1, samp {
  font-family: Inconsolata,
	       Consolas,
	       "Liberation Mono",
	       Menlo,
	       Courier,
	       monospace;
  font-style: normal;
}

/* Font sizes. */

html {
  font-size: 17px;
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

h1 {
  font-size: 3.2rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }
}

h2 {
  font-size: 2.0rem;
  /* text-align: center; */
}

p#author-date {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.8rem;
}

p.prompted-line {
  font-size: 1.7rem;
}

samp {
  font-size: 1.2rem;
}

span.newthought {
  font-size: 1.5rem;
}

p, ol, ul, div.instrument-name-reveal {
  font-size: 1.4rem;
}

pre.code, pre.console-output {
  font-size: 1.25rem;
}

p#file-under {
  font-size: 1.2rem;
}

figcaption, p#thanks, p#copyright {
  font-size: 1.15rem;
}

@media (max-width: 768px) {
  pre.console-output, p#thanks, p#copyright {
    font-size: 1.1rem;
  }
  pre.code, figcaption {
    font-size: 0.9rem;
  }
}

/* Colors. */

html, body {
  /* background-color: #fdf8e0; */
  /* background-color: #fffff8; */
  /* background-color: #fffcf0; */
  background-color: #fdfaef;
  color: #111;
}

div#content {
  background-color: #fdfaef;
}

a:link {
  color: #026aa9;
  text-decoration: none;
}

a:visited {
  color: #02a9c6;
}

h3, pre.code span.keyword, pre.code span.function-name {
  /* color: #76bb69; */
  /* color: #e87280; */
  /* color: #e8d42d; */
  color: #493a74;
}

pre.code span.paren {
  color: #999;
}

pre.console-output span.paren-level-1 {
  /* color: #76bb69; */
  /* color: #e87280; */
  /* color: #e8d42d; */
  /* color: #493a74; */
  color: #026aa9;
  color: #999;
}

pre.console-output span.paren-level-2 {
  color: #d2585f;
  color: #999;
}

pre.console-output span.paren-level-3 {
  color: #96c882;
  color: #999;
}

pre.console-output span.paren-level-4 {
  color: #02a9c6;
  color: #999;
}

p#file-under, pre.code span.doc, p#copyright {
  color: #555;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #111;
    /* color: #fdf8e0; */
    color: #fdfaef;
  }
  h3, pre.code span.keyword, pre.code span.function-name {
    color: #b8aade;
  }
  p#file-under, pre.code span.doc, p#copyright {
    color: #8d8d8d;
  }
  pre.console-output span.paren-level-1, pre.console-output span.paren-level-2, pre.console-output span.paren-level-3, pre.console-output span.paren-level-4 {
    color: #616161;
  }
  a:link {
    color: #4eace6;
  }
  a:visited {
    color: #068ea9;
  }
}

/* Block-level elements. */

h1 {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.25;
  font-weight: 400;
  text-align: left;
  /* text-align: center; */
}

a#thomas-morgan {
  font-weight: bold;
  padding-right: 2rem;
}

span#solo-bass {
  /* display: block; */
  /* margin-left: 2rem; */
  /* font-style: italic; */
}

span#japan-tour {
  display: block;
  margin-left: 0rem;
}

div#concerts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  column-gap: 4rem;
  row-gap: 1.5rem;
}

h2 {
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  line-height: 1;
  font-weight: 400;
  text-shadow: none;
}

h3 {
  margin-top: 2rem;
  margin-bottom: 0;
  line-height: 1.6;
  font-weight: 400;
  /* padding-left: 3ch;		/\* Indent all lines. *\/ */
  /* text-indent: -3ch;		/\* Pull back first line. *\/ */
}

p#author-date {
  font-style: italic;
  margin-bottom: 3rem;
  text-align: center;
}

p.prompted-line {
  font-weight: 400;
  margin-top: 2rem;
  margin-bottom: 4rem;
  line-height: 1.2;
}

p {
  line-height: 2rem;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  padding-right: 0;
  vertical-align: baseline;
}

p#file-under {
  width: 90%;
  margin-left: 5%;
  line-height: 1.7rem;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  padding-right: 0;
  vertical-align: baseline;
  text-align: center;
}

p#thanks {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.5rem;
  /* text-align: center; */
}

p#copyright {
  margin-top: 0.0rem;
  padding-top: 0rem;
  margin-bottom: 1.0rem;
  /* text-align: center; */
}

div.instrument-name-reveal {
  font-weight: 600;
  text-align: center;
}

img {
  width: 100%;
}

img#spread {
  margin-top: 1rem;
}

img:not([src$=".svg"]) {
  background-color: #fdf8e0;
}

/* Concerts. */

.concert {
  overflow: hidden;
  min-width: 0;
}

.concert-details {
  display: grid;
  grid-template-columns: min-content 1fr;
  row-gap: 5px;
  column-gap: 15px;
}

.concert-details dt {
  font-weight: bold;
  white-space: nowrap;
}

.concert-details dd {
  margin: 0;
  min-width: 0;
  word-break: break-all;
}

.note {
  display: block;
  /* margin-left: 3ch; */
}

/* Figures and captions. */

figure {
  max-width: 100%;
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  padding: 0;
  border: 0;
  clear: both;
  vertical-align: baseline;
}

figcaption {
  margin-top: 0.5em;       /* Space between the image and the caption. */
  margin-bottom: 0;
  margin-left: 0;
  line-height: 1.6;
  text-align: center;
}

/* Preformatted blocks. */

pre.code, pre.console-output {
  width: 95%;
  margin-left: 2.5%;
}

pre.code {
  overflow-x: auto;
}

/* Syntax highlighting for keywords. */
pre.code span.keyword {
  font-weight: bold;
}

/* Syntax highlighting for documentation comments. */
pre.code span.doc {
  font-style: italic;
}

pre.console-output {
  white-space: pre-wrap;
  line-height: 1.42;
}

.console-output .console-line:has(.computer-output):not(:last-of-type) {
  margin-bottom: 1em;
}

span.prompt-char {
  font-weight: bold;
}

span.computer-output {
  font-weight: bold;
}

/* "New thought" span for conceptual breaks. */
span.newthought {
  font-variant: small-caps;
}

p span.duet-partner {
  font-weight: 600;
}

samp {
  line-height: 1.2;
}