@font-face {
  font-family: 'VeryRoughGothicWeb';
  src: url("fonts/Very_Rough_Gothic-Regular_web.44543fc03c1f.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'CovikSansMonoWeb';
  src: url("fonts/Covik_Sans_Mono-Black.47f562b0e046.woff2?t=3") format('woff2');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'CovikSansMonoWeb';
  src: url("fonts/Covik_Sans_Mono-Medium.e6194b8f51b6.woff2?t=3") format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Hobeaux-Web';
  src: url("fonts/HobeauxWeb-Bold.4f9220721f05.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ObviouslyWeb';
  src: url("fonts/Obviously-Condensed_Bold.6d918b0420a4.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MesserCondensedWeb';
  src: url("fonts/MesserV2.0-Condensed.bb826b495580.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MesserWeb';
  src: url("fonts/MesserV2.0-Regular.1489309e88f5.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MesserWeb';
  src: url("fonts/MesserV2.0-RegularItalic.c0715d913700.woff2") format('woff2');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HexFranklinCustomWeb';
  src: url("fonts/HexFranklin-cheapandthin-custom-instance.c39561631538.woff2?t=1") format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HexFranklinStandardCustomWeb';
  src: url("fonts/HexFranklinStandard-cheapandthin-custom-instance.18672249aacc.woff2?t=2") format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'QuadrantTextWeb';
  src: url("fonts/QuadrantText-Regular.58a0de14e132.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'QuadrantTextWeb';
  src: url("fonts/QuadrantText-RegularItalic.ac9831dfedd2.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}

* { padding: 0; margin: 0; }

:root {
  --text-font: QuadrantTextWeb, serif;
  --text-accent-font: Gooper-Web, serif;
  --accent-font: HexFranklinStandardCustomWeb, sans-serif;
  --headline-font: HexFranklinCustomWeb, sans-serif;
  --mono-font: CovikSansMonoWeb, monospace;
  --link-blue: royalblue;
  --pink: deeppink;
}

body {
  font-family: var(--text-font);
}

#outer-outer {
  max-width: 600px;
  padding: 0 20px;
  margin: auto auto;
}

a {
  color: var(--link-blue);
  text-decoration: none;
}

strong {
  font-family: var(--accent-font);
  font-weight: 900;
  font-size: 1em;
  margin: 0 1px;
}

strong em {
  font-style: italic;
}

#header {
  margin-bottom: 120px;
  font-family: var(--accent-font) !important;
  font-weight: 700 !important;
  height: 100px;
}

#header, footer {
  font-family: var(--accent-font);
  font-weight: 500;
  /* max-width: 600px; */
  /* margin: auto auto; */
}

footer {
  /* border-top: 1px solid #ccc; */
  padding-top: 20px;
  margin-top: 200px;
  margin-bottom: 100px;
  background: white;
  color: lightgray;
  font-size: 18px;
}

#header a.titlepiece {
  font-family: "VeryRoughGothicWeb", sans-serif;
  font-weight: normal;
  font-size: 58px;
  line-height: 58px;
  color: #333;
  text-align: left;
  display: inline-block;
  z-index: 1000;
  padding-top: 6px;
  text-decoration: none;
  text-align: center;
}

#header .ear {
  display: block;
  width: 30%;
  /*border-left: 1px solid #ddd;*/
  height: 89px;
  float: left;
}

#header .ear-wrapper {
  width: 70px;
  /* margin: auto auto; */
  font-family: var(--text-font);
  font-style: italic;
  font-weight: normal;
  color: #555;
  text-align: center;
  line-height: 15px;
  font-size: 14px;
  padding-top: 20px;
}

#header .slogan {
  text-align: left;
  width: 50px;
  opacity: 0.35;
  padding-top: 15px;
}

#header .ghz {
  text-align: right;
  width: 70px;

}

#outer-container .container {
  /* padding: 0 20px; */
  /* max-width: 600px; */
  /* margin: auto auto; */
}

.three-column {
  display: grid;
  grid-template-columns: 22% auto 22%;
}

.two-column {
  display: grid;
  grid-template-columns: 30% auto;
}

.left-column {
  border-right: 1px solid #eee;
  padding-right: 20px;
}

.right-column {
  border-left: 1px solid #eee;
  padding-left: 20px;
}

.main-column {
  /* padding: 0px 20px; */
}

.post-type-tag {
  font-family: var(--accent-font);
  font-size: 14px;
  color: var(--pink);
  /* padding: 0px 10px; */
  text-align: left;
  margin-top: 20px;
}

.post-type-header {
  font-family: var(--accent-font);
  font-weight: normal;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 10px 0 10px;
  color: #555;
  letter-spacing: 3px;
}

.about-this-blog {
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 17px;
}

.about-this-blog p {
  font-size: 15px;
  line-height: 18px;
}

.logo-henry {
  display: inline-block;
  width: 125px;
}

.logo-henry img {
  width: 100%;
}

.colophon {
  margin-bottom: 40px;
}

.colophon h5 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  margin-top: 4px;
  padding: 8px 0 6px;
}

.colophon p {
  font-size: 12px;
  line-height: 22px;
  font-style: italic;
}

h3.category {
  text-align: center;
  font-family: var(--accent-font);
  font-weight: 700;
  color: #555;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

h3.category span {
  color: var(--link-blue);
  margin-right: 5px;
}

.categories {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 60px;
  border-top: 10px solid #eee;
  text-align: left;
  font-family: var(--accent-font);
  font-weight: 700;
  width: 75%;
}

.categories h5 {
  display: none;
  font-weight: 900;
  color: #333;
  font-size: 0.9em;
}

.categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories a {
  color: var(--link-blue);
  text-decoration: none;
}

.categories a span {
  color: #ccc;
  margin-right: 3px;
}

.categories a strong {
  font-weight: 700;
}

.categories a:hover strong {
  text-decoration: underline;
}

.about-this-blog .wave canvas,
.post-preview .wave canvas {
  height: 50px;
  width: 50px;
  margin-top: 24px;
  display: block;
}

.post-preview .yt-preview {
  margin-bottom: 10px;
  /* border-radius: 15px; */
}

.post-listing {
  list-style: none;
  color: #888;
  padding: 0;
}

.post-link {
  display: block;
  position: relative;
  padding: 10px 0 5px;
  text-decoration: none;
  /*border-bottom: 1px solid whitesmoke;*/
}

.post-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--pink);
}

.post-link .title {
  font-size: 42px;
  display: block;
  line-height: 42px;
  font-weight: normal;
  font-family: var(--headline-font);
}

.post-preview .lede {
  display: block;
  font-style: italic;
  font-size: 1.3em;
  line-height: 1.5rem;
  /*text-transform: uppercase;*/
  color: #555;
  width: 75%;
  /* border-top: 1px dotted #ddd; */
  /* border-bottom: 1px dotted #ddd; */
  margin-bottom: 10px;
  padding: 10px 0;
  margin-top: 0;
}

.post-preview .content {
  font-size: 1.1em;
}

.post-preview .content p {
  line-height: 1.5em;
  margin-bottom: 10px;
}

.post-preview .published {
  display: block;
  font-weight: 500;
  color: #555;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--accent-font);
}

.post-preview {
  color: #555;
  font-size: 14px;
  margin: 10px 0px 80px 0px;
  hyphens: auto;
  /*border-bottom: 4px solid #eee;*/
}

/*.post-preview .content {*/
  /*width: 95%;*/
/*}*/

.post-preview .continue {
  font-family: var(--text-font);
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
  display: block;
  margin-bottom: 80px;
  margin-left: 0px;
  padding-top: 10px;
}

.video-link {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}

.video-link img {
  width: 100%;
}

.post a {
  color: var(--link-blue);
}

.post .hero-image {
  background: #ccc;
  min-height: 300px;
  width: 800px;
  margin-left: calc((800px - 600px)/2*-1);
  margin-top: 10px;
  margin-bottom: 6px;
}

@media (max-width:800px) {
  .post .hero-image {
    width: 100%;
    margin-left: 0;
  }
}

.post .hero-image img {
  width: 100%;
  display: block;
}

.full-width {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
}

.post .hero-caption {
  font-weight: 500;
  font-size: 12px;
  width: 70%;
  text-align: right;
  margin-left: 30%;
  margin-top: 10px;
}

.post .hero-caption p {
  font-size: inherit;
  line-height: 110%;
}

.post .title {
  text-align: left;
  /* max-width: 600px; */
  width: 90%;
  font-size: 42px;
  line-height: 42px;
  font-weight: normal;
  font-family: var(--headline-font);
  hyphens: manual;
}

.post .lede {
  font-style: italic;
  color: #555;
  text-align: center;
  width: 65%;
  margin: 30px auto 14px;
  border-top: 1px solid #eee;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.post p {
  /* hyphens: auto; */
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 20px;
}

.post .metadata {
  padding: 10px 0;
}

.post .metadata .authors {
  /* text-align: center; */
  font-weight: 500;
  color: #777;
  font-style: italic;
}

.post .metadata .by {
  margin-right: 2px;
}

.post .metadata .amp {
  margin: 0 1px;
}

.post .metadata .authors a {
  font-weight: 700;
  font-style: normal;
  font-family: var(--accent-font);
}

.post .metadata .authors .amp:last-child {
  display: none;
}

.post .metadata .published {
  color: #555;
  display: block;
  font-weight: 700;
  /* text-align: center; */
  font-family: var(--accent-font);
}

.post .translation-links {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 10px;
  list-style: none;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  margin-top: 20px;
}

.post .postpublishing-note {
  /*font-size: 1.3rem;*/
  /*line-height: 2rem;*/
  padding: 0 50px;
  margin-top: 40px;
  font-style: italic;
  color: #555;
  position: relative;
}

.post .postpublishing-note .wave canvas {
  height: 50px;
  width: 100px;
  margin: 20px auto;
  display: block;
}

.post .postpublishing-note .bell {
  font-family: var(--accent-font);
  font-weight: 700;
  color: rgb(206,25,117);
  font-style: normal;
  display: block;
  font-size: 32px;
  position: absolute;
  right: 0;
  top: -4px;
}

.post .content {
  margin-top: 30px;
}

/* .post .content > p:first-child:first-letter {
  float: left;
  color: rgb(206,25,117);
  font-size: 58px;
  line-height: 48px;
  height: 34px;
  padding: 0 5px 0 0;
  font-weight: 900;
  font-family: var(--accent-font);
} */

.post .content blockquote {
  font-style: italic;
  color: #777;
  font-size: 1.2rem;
  padding: 10px 0;
}

.post .content .instagram-media {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.post .content .wave {
  margin-top: 50px;
  margin-bottom: 50px;
  height: 20px;
}

.post .content .wave canvas {
  height: 50px;
  width: 100px;
  margin: auto auto;
  display: block;
}

.post .content h2 {
  font-size: 54px;
  margin-top: 40px;
  font-weight: normal;
  font-family: var(--headline-font);
}

.post .content h3 {
  font-size: 42px;
  line-height: 44px;
  margin-top: 35px;
  font-weight: bold;
  font-family: var(--accent-font);
}

.post .content h4 {
  margin-top: 34px;
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 34px;
  font-family: var(--accent-font);
}

.post .content h5 {
  font-size: 17px;
  font-family: 'CovikSansMonoWeb';
  margin-top: 20px;
  margin-bottom: 10px;
}

.post .content h5 + blockquote {
  margin-top: -10px;
}

.post .content h2 em,
.post .content h3 em,
.post .content h4 em {
  font-family: var(--text-font);
  font-style: italic;
}

.post .content ul {
  margin-bottom: 30px;
  padding-left: 30px;
}

.post .content ul li {
  padding-bottom: 5px;
}

/*.post .content li {*/
  /*margin-bottom: 1px;*/
/*}*/

.post .content .highlight {
  background: lightyellow;
  padding: 0 5px;
}

.post .content code {
  font-family: var(--mono-font);
  font-weight: 500;
}

.post hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 50px 0 50px;
}

.post iframe {
  border: 0;
  width: 100%;
  min-height: 50px;
  margin-bottom: 20px;
}

.post .footnotes-sep {
  margin-top: 150px;
}

.post .footnotes {
  font-size: 0.8em;
}

.post .footnotes li {
  list-style: none;
  position: relative;
}

.post .footnotes .footnote-number {
  font-family: var(--mono-font);
  font-weight: bold;
  position: absolute;
  top: -3px;
  left: -20px;
  font-size: 1.2em;
}

.post .footnotes p {
  font-size: 1em;
}

.post .footnote {
  margin-top: 100px;
}

.post .footnote hr {
  border: none;
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 20px;
  margin-top: 20px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.post .contains-img,
.post figure {
  margin-top: 30px;
  margin-bottom: 30px;
}

.post .contains-img img,
.post figure img {
  /* max-width: 400px; */
  width: 100%;
  margin: auto auto;
  display: block;
}

.post .contains-img .caption,
.post figure .caption,
.post figure figcaption,
.post .contains-img .title,
.post figure .title {
  text-align: right;
  padding: 8px 0px 6px 20px;
  display: block;
  /* border-bottom: 1px solid whitesmoke; */
  /* max-width: 75%; */
  margin: auto auto;
  font-size: 14px;
  color: #555;
  font-style: italic;
}

.post figure img.shadowed {
  box-shadow: 0 0 20px rgba(0,0,0,0.35);
  border: 1px solid white;
}

.post .caption em {
  font-family: var(--text-font);
}

.post .about-the-author {
  font-size: 0.9em;
  font-style: italic;
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.post .about-the-author em {
  font-style: normal;
}

.next-prev {
  font-family: var(--accent-font);
  text-align: right;
}

.adjacent-posts {
  margin-top: 100px;
  display: grid;
  grid-template-columns: 50% auto;
  column-gap: 20px;
}

.adjacent-posts .next-post,
.adjacent-posts .prev-post {
  
}

@media (max-width: 468px) {
  .adjacent-posts .next-post,
  .adjacent-posts .prev-post {
    width: 100%;
    float: none;
  }
}

@media (max-width: 650px) {
  .three-column, .two-column {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }

  .left-column, .right-column {
    border: none;
    padding: none;
  }

  .three-column .left-column {
    /* grid-column-start: 2; */
    grid-row-start: 3;
    margin-top: 100px;
  }

  .three-column .main-column {
    margin-bottom: 100px;
  }
}

.ghz-inline-control {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.ghz-play {
  background-image: url('/statics/store/icons/ghz_icon_play.svg');
}

.ghz-pause {
  background-image: url('/statics/store/icons/ghz_icon_pause.svg');
}

.audio-span audio {
  display: none;
}

.audio-span .sep-title.webaudio {
  font-size: 90%;
  padding: 0 0 0 4px;
  display: inline-block;
  border-radius: 4px;
  /*box-shadow: 0 0 2px rgba(0,0,0,0.2);*/
  position: relative;
  cursor: pointer;
  /*border: 1px solid #eee;*/
  background: white;
  color: var(--link-blue);
  margin: 0 1px;
  line-height: 131%;
  text-indent: 0;
  text-decoration: underline;
  text-decoration-color: #ccc;
}

.webaudio i.fa {
  color: #ccc;
  margin-right: 3px;
  width: 12px;
  text-align: center;
  text-decoration: none;
}

table {
  font-family: var(--mono-font);
}

.page-navigation {
  /* text-align: center; */
  font-family: var(--accent-font);
  font-size: 1.1em;
}

.page-navigation a {
  padding: 4px;
  /* background: whitesmoke; */
  /* border-bottom: 4px solid white; */
  display: block;
  border-radius: 2px;
}

.edit-link {
  color: cornflowerblue !important;
  text-align: center;
  display: block;
  padding: 10px;
  font-size: 10px;
}

.search-box {
  padding: 0px 0px;
  margin-bottom: 30px;
  /* font-family: var(--mono-font); */
}

.search-box input[type='text'] {
  /* text-align: center; */
  width: 100%;
  font-weight: bold;
  font-family: inherit;
  font-size: 14px;
  margin-top: 10px;
  padding: 10px 10px;
  border: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.search-box button {
  display: block;
  width: 100%;
  background: none;
  background: whitesmoke;
  border: none;
  color: var(--link-blue);
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  font-size: 16px;
  box-sizing: border-box;
  padding: 10px;
  text-align: left;
}