.page {
  font-family: var(--courier);
  font-size: var(--body-font-size);
}

.page aside {
  float: left;
  width: 200px;
  margin-right: 20px;
}

.page article p, .page article ul, .page article blockquote, .page article ol, .page article h1, .page article h2, .page article h3, .page article h4, .page article hr, .page article table, .page article #bio, .page article #approach-quotes, .page article .wisdom-cards, .page article #collections, .page article #header-image, .page article section#intro {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.page article .image-container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.page article:first-child, .page article .title-container h1 {
  margin-top: 0;
}

.page article img {
  max-width: 100%;
}

p a, ul a, ol a, aside a {
  text-decoration: none;
  color: #000;
  border-bottom: 1px dotted #000;
}

p a:hover, ul a:hover, ol a:hover, aside a:hover {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

#date {
  margin-bottom: 10px;
}

#collection {
  display: inline-block;
  text-decoration: none;
  color: #000;
  padding: 2px 6px;
  background: #f0f0f0;
  margin-bottom: 30px;
  border: 0;
}

#social {
  display: flex;
  flex-flow: row wrap;
}

#social a {
  border: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}

#social span img {
  width: 18px;
  height: 18px;
}

#twitter-social-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("/images/social-twitter.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#permalink-share {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("/images/copy-link-icon.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#tags {
  line-height: 1.5em;
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  font-size: 3rem;
  line-height: 1.1em;
}

h2 {
  font-size: 1.8rem;
  line-height: 1.2em;
}

hr {
  border: 0;
  border-bottom: 1px dashed #000;
  margin: 2em 0;
  overflow: hidden;
}

#breakline {
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom: 1px dashed #000;
}

@media (max-width: 1000px) {
  #breakline {
    overflow: hidden;
  }
}
p, ul, ol, blockquote {
  line-height: 1.5em;
}

blockquote {
  border-left: 1px dotted #000;
  padding-left: 15px;
}

.wisdom-cards .answer img {
  max-width: 80px;
  border-radius: 100%;
}

.wisdom-cards .question, .wisdom-cards .answer {
  margin-bottom: 20px;
}

.wisdom-cards .question {
  font-weight: bold;
}

.wisdom-cards .answer {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr max-content;
}

.wisdom-cards .answer *:first-child {
  margin-top: 0;
}

.wisdom-cards .answer *:last-child {
  margin-bottom: 0;
}

.snail {
  display: inline-block;
  width: 150px;
  height: 93px;
  background: url("/images/email-snail-note.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bubble {
  border: 1px solid #000;
  padding: 10px;
  border-radius: 6px;
  position: relative;
}

.right-bubble::after, .right-bubble::before {
  left: 100%;
  top: 20px;
  border: solid transparent;
  border-top-color: transparent;
  border-top-width: medium;
  border-right-color: transparent;
  border-right-width: medium;
  border-bottom-color: transparent;
  border-bottom-width: medium;
  border-left-color: transparent;
  border-left-width: medium;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.right-bubble::before {
  border-color: rgba(225, 255, 255, 0);
  border-left-color: rgba(225, 255, 255, 0);
  border-left-color: #000;
  border-width: 7px;
  margin-top: -7px;
}

.right-bubble::after {
  border-color: rgba(225, 255, 255, 0);
  border-left-color: rgba(225, 255, 255, 0);
  border-left-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

#bio {
  margin-bottom: 3em;
  font-family: Courier, "Courier New", monospace;
  font-size: 100%;
  border: 1px dotted #000;
  clear: both;
  display: block;
  max-width: 640px;
  border-bottom: 1px dotted #000;
  line-height: 1.5;
  margin-top: 2em;
}

.bio-title {
  padding: 11px;
  line-height: 1.5;
}

.bio-body {
  border-top: 1px dotted #000;
}

.bio-side {
  padding: 11px;
  width: 13.5em;
  float: left;
}

.bio-side .name a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px dotted #000;
}

.bio-side .name a:hover {
  border-bottom-style: solid;
}

.passport a, .passport a:hover {
  border: 0;
}

.passport img {
  width: 111px;
  height: 111px;
  cursor: zoom-in;
}

.bio-fact {
  line-height: 1.5em;
  padding: 11px;
}

.bio-fact *:first-child {
  margin-top: 0;
}

.bio-fact *:last-child {
  margin-bottom: 0;
}

#bio h2 {
  font-weight: bold;
  margin-bottom: 0;
  font-size: var(--body-font-size);
  margin-top: 0.5em;
  padding: 0;
}

#bio #popup {
  display: none;
}

#collections {
  margin-top: 40px;
}

#collections section {
  margin-top: 40px;
}

@media (max-width: 1300px) {
  #collections {
    max-width: 100%;
  }
}
@media (max-width: 1200px) {
  .dark .page aside {
    border-bottom: 1px dotted #fff;
  }
}
@media (max-width: 1000px) {
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 620px) {
  .page aside {
    max-width: 100%;
    width: 100%;
    float: none;
    border-bottom: 1px dotted #000;
    margin-bottom: 40px;
    padding-bottom: 15px;
  }
}
.dark .page aside {
  color: #fff;
}

.dark .page aside {
  color: #fff;
}

.dark .page article {
  color: #fff;
}

.dark .page hr {
  border-color: #fff;
}

.dark .page a {
  color: #fff;
  border-bottom: 1px dotted #fff;
}

.dark .page a:hover {
  border-bottom: 1px solid #fff;
}

.dark #twitter-social-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("/images/social-twitter-white.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dark #permalink-share {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("/images/copy-link-icon-white.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

aside a.tips {
  background: #cdddbb !important;
}

aside a.focuses {
  color: #fff !important;
  background: #48699B !important;
}

aside a.approaches {
  color: #fff !important;
  background: #C66026 !important;
}

aside a.series {
  background: #ffff80 !important;
}

aside a.questions {
  color: #fff !important;
  background: #09099b !important;
}

aside a.transmissions {
  background: #def4ff !important;
}

/*# sourceMappingURL=article-narrow.css.map */