br {
  display: none;
}

.figure,
.responsive-img {
  @media only screen and (max-width: 600px) {
    width: 90%;
  }
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr;
  text-align: center;
}

/* Photographs used to be 50% of the window, flush against its left edge and hard
   up against the paragraph above and the one below. They are figures: centred in
   the column, capped at a page-sized width rather than a screen-sized one, and
   given room to read as a break in the text. */
.lama-img {
  border-radius: 6px;
  display: block;
  height: auto;
  margin: 18px auto;
  max-width: min(620px, 100%);
}

@media only screen and (max-width: 600px) {
  .lama-img {
    margin: 12px auto;
  }
}

/* Some lessons wrap the photograph and its caption in a `.figure` block, and the
   image inside it carries no class of its own. It is a figure all the same. */
.figure img,
.responsive-img img {
  border-radius: 6px;
  display: block;
  height: auto;
  margin: 12px auto;
  max-width: min(620px, 100%);
}

/* A mark inside a sentence - the ཨ, the sun-and-moon sign - is an image as well,
   and has to stay on the line it belongs to. The old rule set `height: ", "`,
   which is not a length, so it did nothing at all. */
.inline-figure {
  display: inline;
  /* hang.png is 545x1059: a Tibetan letter drawn at poster size, sitting in the
       middle of a sentence. It is set to the height of the line it interrupts. */
  height: 1.15em;
  margin: 0 2px;
  vertical-align: -0.15em;
  width: auto;
}

.title,
.yuanwen,
.subtitle {
  font-family: "heiti, hei";
  font-weight: bold;
}

span.yuanwen {
  font-family: kaiti, kai;
}

.jiaozheng,
.jisong,
.zang,
.dingli {
  font-family: kaiti, kai;
}

/* .title,
.dingli,
.jisong,
th,
.ks,
.js,
.author,
.sikaoti,
.subtitle,
.center,
.zhushi,
[align='center'] {
    text-indent: 0;
} */

.title {
  font-weight: 700;
  line-height: 2.5;
  text-align: center;
}

.jisong {
  justify-self: center;
  text-align: center;
  font-weight: bold;
}

.kepan p {
  color: gray;
  font-family: "microsoft yahei";
}

.dingli {
  display: grid;
  justify-self: center;
  text-align: center;
  width: 100%;
}

.author {
  text-align: center;
  line-height: 1.3;
  font-family: kaiti;
}

.ks {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  justify-self: stretch;
}

.double p {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
}

.center {
  text-align: center;
}

.zang {
  color: #666;
}

.han {
  padding-left: 15px;
  font-family: source-regular, DengXian;
  font-weight: normal;
}

.note {
  /* color: gray; */
  text-align: center;
  border-bottom: 1px dotted;
  font-weight: bold;
}

.note-right {
  color: gray;
  text-align: right;
}

.subtitle {
  font-weight: bold;
  padding: 1rem 0;
}

.sikaoti {
  display: grid;
  grid-row-gap: 10px;
  line-height: 1.3;
  margin-left: 37px;
  @media only screen and (max-width: 600px) {
    margin-left: 0;
  }
}

.zhushi {
  position: relative;
  font-family: source-regular, DengXian;
  color: #c74f4d;
  border-bottom: 1px dotted #c74f4d;
}

span.zhushi[tip]:hover::after {
  content: attr(tip);
  border: #c0c0c0 1px dotted;
  padding: 5px 5px 5px 5px;
  display: block;
  color: #000;
  background-color: #f6e0c4;
  border: 1px solid #f5bea6;
  z-index: 100;
  left: 0px;
  margin-top: 10px;
  width: 250px;
  position: absolute;
  top: 10px;
  text-decoration: none;
}

.zhuyin {
  position: relative;
  border-bottom: 1px dotted #c74f4d;
}

span.zhuyin[tip]:hover::after {
  content: attr(tip);
  border: #c0c0c0 1px dotted;
  padding: 5px 5px 5px 5px;
  display: block;
  color: #000;
  background-color: #f6e0c4;
  border: 1px solid #f5bea6;
  z-index: 100;
  left: 0px;
  margin-top: 10px;
  width: 250px;
  position: absolute;
  top: 10px;
  text-decoration: none;
}