/* 法脉传承 - the transmission drawn as one line down the page.

   Seven masters could be seven cards, but a grid would say they are seven
   separate people. The subject is a succession, so the page is a single rule
   with the masters as stations on it, in order, arriving at the last one -
   which is the shelf the reader came from.

   Nothing here invents a palette: the ochre, the seal red and the paper are the
   home page's, so the page reads as part of 不离 rather than as a leaflet
   inserted into it. */
.lineage {
  --rail: 58px;
  --marker: 32px;
  color: #4e3a2a;
  margin: 0 auto;
  max-width: 880px;
  padding: 0 16px 40px;
  text-align: left;
}

.lineage__head {
  border-bottom: 1px solid #ddddc8;
  padding: 16px 0 18px;
}

.lineage__eyebrow {
  color: #a53a2a;
  font-size: 0.82em;
  letter-spacing: 0.22em;
  margin: 0;
  text-indent: 0.22em;
}

.lineage__title {
  color: #4e0d0d;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 1.6em;
  line-height: 1.35;
  margin: 6px 0 0;
}

.lineage__lead {
  color: #6b6257;
  font-size: 0.95em;
  line-height: 1.9;
  margin: 10px 0 0;
  max-width: 38em;
}

.lineage__jump {
  color: #7a1f1f;
  display: inline-block;
  font-size: 0.9em;
  margin-top: 12px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.lineage__jump:hover {
  color: #4e0d0d;
}

/* The line itself. The border is the transmission; every station hangs off it,
   and the markers are laid over it rather than beside it. */
.lineage__line {
  border-left: 1px solid #d9c7a0;
  list-style: none;
  margin: 0;
  padding: 30px 0 0 var(--rail);
}

.station {
  padding-bottom: 34px;
  position: relative;
}

.station__step {
  align-items: center;
  background: #fbf8f1;
  border: 1px solid #d9c7a0;
  border-radius: 50%;
  color: #a53a2a;
  display: flex;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 0.95em;
  height: var(--marker);
  justify-content: center;
  left: calc(-1 * (var(--rail) + var(--marker) / 2) + 0.5px);
  position: absolute;
  top: 2px;
  width: var(--marker);
}

.station__name {
  color: #4e0d0d;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 1.2em;
  line-height: 1.4;
  margin: 0;
}

/* The dates are the fine print of the name, on the same line as it. */
.station__era {
  color: #8a7a6a;
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 400;
  padding-left: 0.7em;
  white-space: nowrap;
}

.station__epithet {
  color: #6b6257;
  font-size: 0.88em;
  margin: 3px 0 0;
}

.station__en {
  color: #a49685;
  padding-left: 0.7em;
}

/* 法语 in the master's own words, so it takes the serif the 法本 readers use
   and keeps its own line breaks - two of these are four-line 祈祷文. */
.station__quote {
  border: 0;
  color: #5b4a3a;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 1.02em;
  line-height: 2;
  /* An epigraph, not another paragraph: the serif and the rule are what keep
     the master's own words from reading as our prose about him. */
  border-left: 2px solid #d9c7a0;
  margin: 12px 0 0;
  max-width: 34em;
  padding: 0 0 0 14px;
  white-space: pre-line;
}

/* 40em of running text - about 40 汉字 a line, which is what a 法本 page here
   sets. 34 was a Latin habit; a CJK line carries its meaning in fewer glyphs
   and reads short and choppy at that width. */
.station__summary {
  font-size: 1em;
  line-height: 1.95;
  margin: 10px 0 0;
  max-width: 40em;
}

/* What he is known for, in the three kinds of work he is known for. */
.station__fields {
  margin: 16px 0 0;
  max-width: 40em;
}

.station__fields dt {
  color: #a53a2a;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 0.95em;
  padding-top: 10px;
}

.station__fields dd {
  font-size: 0.95em;
  line-height: 1.9;
  margin: 2px 0 0;
}

.station__shelf-label {
  color: #8a7a6a;
  font-size: 0.82em;
  letter-spacing: 0.1em;
  margin: 18px 0 0;
}

/* Three counts read as three counts. As a sentence they were a paragraph with
   digits buried in it, which is the one thing on this card a reader wants at a
   glance. Baseline-aligned so the figures sit on one line and the labels hang
   under them. */
.station__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.station__figures li {
  display: flex;
  flex-direction: column;
}

.station__figure {
  color: #4e0d0d;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 1.5em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.station__figure-label {
  color: #8a7a6a;
  font-size: 0.82em;
  padding-top: 2px;
}

/* The honest footnote to a count: quieter than the number it qualifies, and
   still full-measure prose rather than fine print nobody reads. */
.station__note {
  color: #6b6257;
  font-size: 0.9em;
  line-height: 1.9;
  margin: 6px 0 0;
  /* Wider than the running text above it, not narrower: at 0.9em, 40em is 60px
     short of the paragraphs it sits under, which is what was breaking the last
     line across 堪布文集. */
  max-width: 46em;
}

/* A link that names one thing does not break in the middle of naming it. */
.station__note a {
  color: #7a1f1f;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.station__note a:hover {
  color: #4e0d0d;
}

/* The card ends here, so the limit sits away from the doors above it rather
   than stacked against them. */
.station__note--last {
  border-top: 1px solid #ede6d4;
  margin-top: 18px;
  padding-top: 12px;
}

.station__shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.station__shelf a {
  align-items: baseline;
  background: #fff;
  border: 1px solid #ddddc8;
  border-radius: 4px;
  color: #4e3a2a;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.station__shelf a:hover {
  border-color: #b99c60;
  box-shadow: 0 4px 12px rgba(62, 47, 25, 0.12);
  color: #4e0d0d;
}

.station__shelf a:focus-visible {
  outline: 3px solid #14756d;
  outline-offset: 2px;
}

.station__work {
  font-size: 0.95em;
}

.station__count {
  color: #8a7a6a;
  font-size: 0.8em;
  white-space: nowrap;
}

.station__doors {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 0;
}

.station__doors a,
.station__source {
  color: #7a1f1f;
  font-size: 0.88em;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.station__source {
  display: inline-block;
  margin-top: 14px;
}

.station__doors a:hover,
.station__source:hover {
  color: #4e0d0d;
}

/* The last station is the one the reader came for, so it is the one thing on
   the page that is drawn rather than ruled. */
.station--subject {
  padding-bottom: 8px;
}

.station--subject .station__body {
  background: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 6px;
  padding: 18px 20px 22px;
}

.station--subject .station__step {
  background: #4e0d0d;
  border-color: #4e0d0d;
  color: #fbf8f1;
  top: 18px;
}

.station--subject .station__name {
  font-size: 1.35em;
}

.lineage__credit {
  border-top: 1px solid #ddddc8;
  color: #8a7a6a;
  font-size: 0.85em;
  line-height: 1.9;
  margin-top: 30px;
  padding-top: 14px;
}

.lineage__credit a {
  color: #7a1f1f;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.lineage__credit a:hover {
  color: #4e0d0d;
}

/* A tablet has the width for the line but not for the desktop rail: the text
   column is what the space belongs to. */
@media screen and (max-width: 900px) {
  .lineage {
    --rail: 46px;
    --marker: 30px;
  }
}

/* On a phone the rail keeps the line but gives the text back its width. */
@media screen and (max-width: 560px) {
  .lineage {
    --rail: 28px;
    --marker: 24px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .lineage__title {
    font-size: 1.4em;
  }

  .station--subject .station__body {
    padding: 14px 14px 18px;
  }

  .station__era {
    display: block;
    padding-left: 0;
  }

  .station__en {
    display: block;
    padding-left: 0;
  }
}