@font-face {
  font-family: 'Source Serif Pro';
  src: url('../fonts/source-serif-pro-v11-latin-regular.woff2') format('woff2'),
       url('../fonts/source-serif-pro-v11-latin-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('../fonts/source-serif-pro-v11-latin-italic.woff2') format('woff2'),
       url('../fonts/source-serif-pro-v11-latin-italic.woff') format('woff');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('../fonts/source-serif-pro-v11-latin-700.woff2') format('woff2'),
       url('../fonts/source-serif-pro-v11-latin-700.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('../fonts/source-serif-pro-v11-latin-700italic.woff2') format('woff2'),
       url('../fonts/source-serif-pro-v11-latin-700italic.woff') format('woff');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* source-serif-sc - latin (subsettted for small caps) */
@font-face {
  font-family: 'sourceserifpro-sc';
  src: url('../fonts/sourceserifpro-sc.woff2') format('woff2'),
       url('../fonts/sourceserifpro-sc.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('../fonts/pt-sans-v12-latin-regular.woff2') format('woff2'),
       url('../fonts/pt-sans-v12-latin-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('../fonts/pt-sans-v12-latin-italic.woff2') format('woff2'),
       url('../fonts/pt-sans-v12-latin-italic.woff') format('woff');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('../fonts/pt-sans-v12-latin-700.woff2') format('woff2'),
       url('../fonts/pt-sans-v12-latin-700.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'PT Sans';
  src: url('../fonts/pt-sans-v12-latin-700italic.woff2') format('woff2'),
       url('../fonts/pt-sans-v12-latin-700italic.woff') format('woff');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

mark {
	background-color: transparent;
	color: inherit;
}
/* bits tagged by mark are yellow highlighted with no stylesheet, do I want to style this tag? Not presently using */

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #fff;
	}

	body, input, select, textarea {
		color: #000000;
    font-family: "Source Serif Pro", Constantia, Corbel, Candara, Calibri, Georgia, "Noto Sans", "Noto Sans CJK TC", "Noto Sans TC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
		font-size: 21px;
		font-weight: 400;
		line-height: 1.75em;
	}

	a {
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #000000;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #f40c36 !important;
			text-decoration: none;
		}

    ::selection {
      color: #000000;
      background: #08fcf5;
    }

	strong, b {
		font-weight: 700;
	}

	em, i, cite {
		font-style: italic;
	}

	p {
		margin: 0;
    text-indent: 1.5em;
	}

  p.noindent {
  	text-indent: 0;
  }

  p.poem {
    text-align: left;
  	text-indent: -1em;
    margin-left: 1em;
  }

  p.thinspace	{
    line-height: 0.5em;
  } /* Paypal spacing */

  p.quotejavascript {
    font-family: "PT Sans", Corbel, Candara, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
    line-height: 1.5em;
    text-indent: 0;
    color: #000;
    padding: 1em;
    margin: 1em 1em 1em 1em;
    background-color: #12fbed;
    border: 2px solid #000;
  } /* for no Javascript email notice */

  .chinese  {
    text-indent: 0;
    font-size: 1.2em;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    margin: 1.5em 0 1.5em 0;
  }  /* on ryokan.html */

  .notetop, .note {
    font-family: "PT Sans", "DejaVu Sans", Corbel, Candara, sans-serif;
    font-size: 0.75em;
    line-height: 1.4em;
    color: #000;
    margin-left: 1.35em;
    margin-bottom: 0.8em;
    text-indent: 0;
  }

  .notetop  {
    margin-top: 1.2em;
    border-top: 1px solid #D7D6E1;
    padding-top: 0.8em;
  }

  .date  {
    font-family: "PT Sans", "DejaVu Sans", Corbel, Candara, sans-serif;
    font-size: 0.95em;
    line-height: 1.4em;
    color: #000;
    text-indent: 1em;
    margin-bottom: 1.2em;
    margin-top: 1.2em;
    /* border-bottom: 1px solid #f49456;
    border-top: 1px solid #f49456; */
    border: 1px solid #f9b3a4;  /* #ee6105 */
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    background-color: #f7efe0;  /* #f0e7ce */
  }

  /* .date a {
    border-bottom-color: transparent;
    color: #736f6f;
  } */

	h1, h2, h3, h4, h5, h6 {
    font-family: "PT Sans", Carlito, Calibri, Corbel, sans-serif;
		font-weight: 400;
		line-height: 1em;
		margin: 0.8em 0 0.5em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.6em;
		line-height: 1.5em;
    margin-top: 1.5em;
	}

	h3 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.4em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 1.3em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 1.2em;
		line-height: 1.5em;
	}

  /* Better to use Unicode characters for proper font versions of small type, which also doesn't mess up line spacing */

	sub {
		font-size: 0.65em;
		position: relative;
		top: 0.4em;
	}

	sup {
		font-size: 0.65em;
		position: relative;
		top: -0.5em;
	}

.sc {  /* true small caps */
  font-family: sourceserifpro-sc, "Source Serif Pro";
  letter-spacing: 0.05em;
}

	hr {
		border: 0;
		border-bottom: 1px solid #D7D6E1;
		margin: 2em 0;
	}

	blockquote {
    font-size: 0.89em;
    line-height: 1.7em;
		border-left: solid 6px #f49456; /* #c2aaf6 */
    background-color: #f5e7d6; /* #eee7f6 */
		margin: 1em 0 1em 0;
    padding: 1em 1em 0.8em 1.4em;
	}

  p.blockquote {
  	text-indent: 1em;
  	}

  p.blocknoindent {
  	text-indent: 0;
  	}

  p.blockflushright {
  	text-align: right;
  	text-indent: 0;
    margin-top: 0.5em; /* margin because used for quote attribution */
  	}

   .extract {
      font-size: 0.9em;
      line-height: 1.7em;
      text-indent: 0;
      border: solid 2px #f49456; /* #b510c3  */
      border-radius: 20px;
      background-color: #f5e7d6; /* #ebdcfb */
      margin: 0.5em 0 0.5em 0;
      padding: 1em;
    }  /* audio rounded description box */

    .pageref  {
      color: #5d3f05;
    } /* span class audio page */

    .pageref a {
  		color: #5d3f05;
  	}

    audio  {
      display: block;
      margin-bottom: 0.7em;
    }  /*  better that using br tag, and can display: none for print without extra space from br tag */

	.align-left {
		text-align: left;
    text-indent: 0;
	}

	.align-center {
		text-align: center;
    text-indent: 0;
	}

	.align-right {
		text-align: right;
	}

  .footer {
  	text-align: center;
    text-indent: 0;
  	font-size: 0.95em;
  	line-height: 1.2em;
  	border-top: 1px solid #D7D6E1;
  	margin-top: 3em;
    padding-top: 2em;
  }

	header.major h2 {
		font-size: 2em;
    margin-top: 0;
	}

/* Image */

	.image {
		/* border-radius: 0.35em; */
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			/* border-radius: 0.35em; */
			display: block;
		}

		.image.left {
			float: left;
      margin: 0.1em 1em 0.5em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
      margin: 0.1em 0 0.5em 1em;
			top: 0.25em;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.fit {
			display: block;
			margin: 0 0 1.5em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

/* Circular or elliptical mast image used in #header below */

		.image.mast {
			border-radius: 100%;
		}

			.image.mast:before {
				display: none;
			}

			.image.mast img {
				border-radius: 100%;
				width: 100%;
			}

/* SVG https://change-svg-color.vercel.app/ */

.filter-red {
  filter: invert(9%) sepia(100%) saturate(7056%) hue-rotate(347deg) brightness(111%) contrast(91%); /* #f40c36 same as hover */
  }

.filter-blue {
  filter: invert(9%) sepia(99%) saturate(6251%) hue-rotate(241deg) brightness(99%) contrast(117%);
}

.filter-purple {
  filter: invert(10%) sepia(98%) saturate(6348%) hue-rotate(278deg) brightness(87%) contrast(102%);
}

.filter-green {
  filter: invert(96%) sepia(47%) saturate(7107%) hue-rotate(14deg) brightness(100%) contrast(93%);
}

.filter-brown  {
  filter: invert(28%) sepia(99%) saturate(1017%) hue-rotate(16deg) brightness(90%) contrast(88%);
}

.filter-fawn {
  filter: invert(72%) sepia(10%) saturate(1042%) hue-rotate(356deg) brightness(100%) contrast(86%);
}

.filter-pressmark {
  filter: invert(87%) sepia(10%) saturate(1570%) hue-rotate(336deg) brightness(88%) contrast(84%);
  /* filter: invert(63%) sepia(35%) saturate(625%) hue-rotate(211deg) brightness(108%) contrast(93%); */
}
/*  currently yellowy-fawn */

/* List */

	ol {
		list-style: decimal;
		margin: 1em 0 1em 0;
		padding-left: 3em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0.7em 0 1em 0;
		padding-left: 2.5em;
	}

		ul li {
			padding-left: 0.25em;
		}

/* Definition list for links collection */

	dl {
		margin: 1em 0 1em 0;
    line-height: 1.65em;
	}

  dt {
  	display: inline;
    font-style: normal;
    font-weight: 700;
  }

  dt a {
    border-bottom: 5px solid #f49456;  /* #c2aaf6 */
  }

  dd {
  	text-align: left;
  	border-left: 5px solid #f49456;
  	margin-left: 1em;
  	padding-left: 0.7em;
  	margin-right: 0;
  }

  dt a:hover	{
    border-bottom: 5px solid #f40c36;  /* #f49456 */
    transition-property: none;
    color: #5d3f05 !important;  /* #f40c36 -- if don't have !important it goes to red ordinary link */
  }

  /* Mailing list form */

  .form {
  	text-indent: 0;
  	margin-top: 0.8em;
  	margin-bottom: 0.6em;
  }

  .button {
  	cursor: pointer;
    font-family: "PT Sans", Corbel, Candara, sans-serif;
    font-size: 0.85em;
    padding: 0.1em 0.3em 0.1em 0.3em;
  }  /* subscribe button */

  .forminput {
    font-family: "PT Sans", Corbel, Candara, sans-serif;
    font-size: 0.85em;
  	background-color: #fff;
  	color: #000;
  	border: 1px solid #ccc;
    margin-bottom: 0.4em;
    padding: 0.2em 0 0.2em 0.4em;
  }

/* Header */

	#header {
		background-color: #000;
		color: rgba(255, 255, 255, 0.5);
		height: 100%;
		left: 0;
		padding: 8em 4em;
		position: fixed;
		text-align: center;
		top: 0;
		width: 35%;
	}

		#header strong, #header b {
			color: #ffffff;
		}

		#header h2, #header h3, #header h4, #header h5, #header h6 {
			color: #ffffff;
		}

		#header h1 {
			color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
			font-size: 1.35em;
			line-height: 1.6em;
			margin: 0 0 0.7em 0;
		}

    #header h1 a, h2 a {
      border-bottom-color: transparent;
      color: #f66d16; /* altered because too little contrast with previous purple, in WAVE */
    }

    #header h2 {
			color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
			font-size: 1.05em;
			line-height: 1.5em;
      margin: 0.2em 0 0 0;
		}

		#header .image.mast {
			margin: 0 0 0.5em 0;
			width: 7.5em; /* change circle diameter or ellipse width -- see .image.mast above */
    }

/* Main */

	#main {
		margin-left: 35%;
		max-width: 46em;
		padding: 7.7em 4em 4em 4em;
		width: calc(100% - 35%);
	}

/* Large */

	@media screen and (max-width: 1280px) {

		/* Header */

			#header {
				padding: 6em 3em;
				width: 30%;
			}

		/* Main */

			#main {
				margin-left: 30%;
				max-width: 39em;
				padding: 5.7em 3em 3em 3.6em;  /* was 5.7em 3em 3em 3em; */
				width: calc(100% - 30%);
			}

	}

/* Medium */

	@media screen and (max-width: 980px) {

		/* Basic */

      header.major h2 {
				font-size: 1.7em;
			}

		/* Header */

			#header {
				left: auto;
				padding: 2.3em 4em;
				position: relative; /* needed */
				text-align: center;
				top: auto;
				width: 100%;
				display: block;
			}

					/* #header h1 br {
						display: inline;
					} */

		/* Main */

			#main {
				margin: 0;
				padding: 3.2em 3em 3em 3em;
        width: 100%;
        max-width: none;
			}

	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			h1 {
				font-size: 1.5em;
			}

			h2 {
				font-size: 1.35em;
			}

			h3 {
				font-size: 1.3em;
			}

      h4 {
				font-size: 1.2em;
			}

      h5 {
				font-size: 1.1em;
			}

      h6 {
        font-size: 1em;
      }

			header.major h2 {
				font-size: 1.45em;  /* third size, from 2em to 1.7em, then 1.45em on going smaller width than 736px */
			}

		/* Header */

			#header {
				padding: 2em 1.5em;
			}

		/* Main */

			#main {
				padding: 2.4em 2em 2.5em 2em;
			}

	}

/* XSmall */

	@media screen and (max-width: 480px) {

			#header {
				padding: 2em 1.5em;
			}

      #main {
        padding: 2.2em 0.8em 2.5em 0.8em;
      }

      h1 {
        font-size: 1.35em;
      }

      h2 {
        font-size: 1.25em;
      }

      h3 {
    		font-size: 1.2em;
    	}

    	h4 {
    		font-size: 1.15em;
    	}

    	h5 {
    		font-size: 1.1em;
    	}

    	h6 {
    		font-size: 1.05em;
    	}

      header.major h2 {
        font-size: 1.35em;  /* fourth size, from 2em to 1.7em, then 1.45em on going smaller width than 736px, to 1.35 */
      }

      p {
        text-indent: 1em;
      }

      p, ol, ul, dl {
        font-size: 0.85em;
        line-height: 1.6em;
      }

      ul {
        padding-left: 1.95em;
      }

      ol {
        padding-left: 2.5em;
      }

      dt a {
        border-bottom: 4px solid #f49456;
      }

      dd {
        border-left: 4px solid #f49456;
      }

      dt a:hover	{
        border-bottom: 4px solid #f40c36;
      }

      blockquote  {
        font-size: 0.9em;
        line-height: 1.5em;
        border-left: solid 4px #f49456;
        margin: 0.6em 0 0.6em 0;
        padding: 0.9em 0.8em 0.8em 0.7em;
      }

      .extract  {
        font-size: 0.81em;
        line-height: 1.5em;
      }

      audio {
        width: 100%;
      }

      .chinese  {
        text-indent: 0;
        font-size: 1.1em;
        line-height: 1.3em;
      }

      .notetop, .note {
        margin-left: 1.2em;
      }

      .date  {
        font-size: 0.85em;
      }

	}

  /* Print styles */

  @media print {

    p, ol, ul  {
      font-size: 11pt;
      line-height: 16pt;
    }

    dl  {
      font-size: 11pt;
      line-height: 17pt;
    }

    dt a {
      border-bottom: 3pt solid #ccc;
    }

    dd {
      border-left: 3pt solid #ccc;
    }

    blockquote {
      border-left: solid 5pt #ccc;
      background-color: #fff;
      margin: 0.8em 0 0.8em 0;
      padding: 0.2em 0.2em 0.2em 1em;
    }

    p.blockquote {
      font-size: 10pt;
      line-height: 15pt;
      text-indent: 1em;
      }

    p.blocknoindent {
      font-size: 10pt;
      line-height: 15pt;
      text-indent: 0;
      }

    p.blockflushright {
      font-size: 10pt;
      line-height: 15pt;
      text-align: right;
      text-indent: 0;
      margin-top: 0.5em;
      }

      .extract {
         font-size: 10pt;
         line-height: 15pt;
         text-indent: 0;
         border: solid 1pt #ccc;
         background-color: #fff;
         margin: 0.5em 0 0.5em 0;
         padding: 1em;
       }

       .pageref  {
         color: #000;
       } /* span class audio page */

       .pageref a {
        color: #000;
      }


    .chinese  {
      font-size: 16pt;
      line-height: 22pt;
      color: #000;
      margin: 16pt 0 16pt 0;
    }

    .notetop, .note {
      font-size: 9pt;
      line-height: 13pt;
      color: #000;
      margin-left: 1.25em;
    }

    .notetop  {
      border-top: 1pt solid #ccc;
    }

    .date  {
      font-size: 10pt;
      line-height: 13pt;
    }

    hr {
      border: 0;
      border-bottom: 1pt solid #ccc;
      margin: 2em 0;
    }

    h1  {
      font-size: 24pt;
    }

    h2 {
      font-size: 22pt;
    }

    h3 {
      font-size: 20pt;
    }

    h4 {
      font-size: 18pt;
    }

    h5 {
      font-size: 16pt;
    }

    h6 {
      font-size: 14pt;
    }

    header.major h2 {
      font-size: 24pt;
      padding-top: 0;
    }

    #header strong, #header b {
      color: #000;
    }

  #header {
    left: auto;
    position: relative; /* needed */
    text-align: center;
    top: auto;
    width: 100%;
    display: block;
    color: black;
    margin: 0;
    padding: 0 2em 1em 2em;
    border-bottom: 1pt solid #ccc;
  }

  #main {
    margin: 0;
    padding: 1em 4em;
    width: 100%;
    max-width: none;
  }

  #header h1 {
    font-size: 24pt;
    color: #000;
  }

  #header h1 a, h2 a {
    color: #000;
  }

  #header h2 {
    font-size: 22pt;
    color: #000;
  }

  .footer {
    font-size: 11pt;
    line-height: 14pt;
    border-top: 1pt solid #ccc;
  }

  .filter-pressmark {
    filter: none;
    }  /* so SVG Coronzon pressmark prints its natural black */

    audio {
      display: none;
    }

}