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,
.subtitle,
.标题_书名,
.标题_课程名,
.标题_品名,
.标题_小标题,
.标题_副标题 {
  font-family: var(--font-hei);
  font-weight: bold;
}

/* 经论原文: the root text a class is explaining, quoted inside the explanation.
   Three sources mark it three ways and it is one thing to a reader, so it is
   given one ground: 智悲海 marks it with this class, the 上师课堂 documents with
   `.yuanwen` - a div around the quoted paragraphs, 5,279 of them - and a 笔录
   with nothing but the 【 】 the typist wrote, which the reader finds and marks
   `.fb-quote`; see faben_read.css for how a quotation of several paragraphs is
   closed up into one. The bold `.yuanwen` used to be set in is the tint's work
   now. */
.经论原文,
.yuanwen {
  background-color: var(--read-quote-paper);
  border-radius: 6px;
  color: var(--read-verse-ink, inherit);
  padding: 0.5em 0.9em;
}

/* A few words of the 经论 quoted inside a sentence is not a block, and takes the
   face instead of the rule. */
span.yuanwen,
.经论原文_行内 {
  background: none;
  font-family: var(--font-kai);
  padding: 0;
}

/* 楷体 by every name it goes by, 简体 first. Of the two the old `kaiti, kai`
   asked for, macOS resolves only `kai` - 標楷體, the traditional cut - so a verse
   of 简体 was set in a face drawn for the other script and filled in glyph by
   glyph from wherever the system found them. */
.jiaozheng,
.zang,
.dingli,
.藏文 {
  font-family: var(--font-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` is what the 上师课堂 documents wrap a
   verse in and `.颂词` is 智悲海's own div; `.fb-verse` is the class the reader
   puts on a line of a 笔录, which arrives as bare paragraphs and says nothing
   about which of them are verse - see chuancheng.faben_text.

   The face and the size are the text's own. A verse is the root of what the
   class is explaining, and it is read at the same setting as the 经论原文 it
   belongs to; being centred is what says it is verse. 楷体 said it too, but at
   the length these run - whole root texts, 2000 lines of 窍诀宝藏论 - a face
   drawn for a few quoted lines is a face read for an hour. */
.jisong,
.songci,
.颂词,
.fb-verse {
  justify-self: stretch;
  text-align: center;
  /* No bold: the 楷体 this used to be set in has no bold cut, so the browser
     synthesised one, and the weight a verse needs it takes from a deeper ink. */
  font-weight: normal;
  color: var(--read-verse-ink, inherit);
  /* Prose is set at 1.95 for a long read. A verse is short lines that belong
     together, and the same leading pulls them apart. */
  line-height: 1.75;
  /* 疏排: a verse read aloud is read slower than the prose around it, and the
     characters set a little apart say so without changing the face or the size.
     A whole root text is set this way for pages at a time, so it stays small
     enough to read as air between the words rather than as a wider line. */
  letter-spacing: 0.06em;
}

/* Verses keep their plain, centred treatment. The shaded background belongs
   to prose quotations, not to the verse lines. */
:is(.jisong, .songci, .颂词):not(:has(p)),
:is(.jisong, .songci, .颂词) p,
.fb-verse {
  background: none;
  border-radius: 0;
  padding: 0;
  text-indent: 0;
}

/* Official EPUB verses already have their paper/padding on the paragraph.
   Do not double it when verse detection adds its inner numbering span. */
:is(.经论原文, .yuanwen, .jisong, .songci, .颂词) .fb-verse {
  background: none;
  padding: 0;
}

/* The 笔录's mark goes on the numbering span, which is inline and sits inside
   the paragraph rather than around it. */
span.fb-verse {
  display: block;
}

/* Opening homage/bodhicitta and closing dedication keep the original plain
   treatment. `dingli` is source markup; fb-ritual marks whole fixed formulas,
   never a lecturer's paragraph discussing or quoting part of one. */
.fb-verse.fb-ritual,
.dingli :is(.fb-verse, .jisong, .songci, .颂词),
.dingli :is(.jisong, .songci, .颂词) p,
:is(p, .jisong, .songci, .颂词):has(> .fb-ritual) {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* 科判 - the outline a commentary hangs on. 智悲海 marks it on the paragraph,
   the 上师课堂 documents on a block around it; the same grey either way. */
.kepan p,
.科判 {
  color: gray;
  font-family: var(--font-hei);
}

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

.author,
.署名信息_作者,
.署名信息_译者,
.署名信息_讲者,
.署名信息_落款 {
  text-align: center;
  line-height: 1.3;
  font-family: var(--font-kai);
}

.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;
}