/* ==================================================================
   The tractate
   ==================================================================
   A Talmud page for a homepage: the main text in the center,
   commentary in both margins. Three columns above 1140px, a single
   column below.

   DOM order is main, then left margin, then right margin, so a small
   screen and a screen reader both get the main text first.
   ================================================================== */

/* --- the type scale -----------------------------------------------
   Fixed sizes: a 17px body under a 35px slab headline, a 21px lede
   between them. The columns hold that proportion at every width
   rather than growing the body with the viewport.
   ------------------------------------------------------------------ */

.tractate {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
  align-items: start;
}

/* In the single-column stack the shell alone would give a 1000px line,
   so the measure caps and the stack centers. */
@media (max-width: 1139px) {
  .tractate {
    max-width: 40rem;
    margin-inline: auto;
  }
}

/* Area names only exist once the areas do. Naming them in the
   single-column stack mints implicit lines and lands all three columns
   on top of each other. */
@media (min-width: 1140px) {
  .tractate {
    grid-template-columns: 1fr minmax(0, 48%) 1fr;
    grid-template-areas: "projects main work";
    column-gap: 2.8rem;
  }

  .tractate__main { grid-area: main; }

  .tractate__projects {
    grid-area: projects;
    border-right: var(--border-width) solid var(--rule);
    padding-right: 2.4rem;
  }

  .tractate__work {
    grid-area: work;
    border-left: var(--border-width) solid var(--rule);
    padding-left: 2.4rem;
  }

  .tractate__main,

  /* The margins are set smaller only while they sit in an actual
     margin. Stacked, they read at the same 17px as the main column. */
  .tractate__margin { font-size: .9375rem; }
}

/* --- the center column ------------------------------------------- */

.tractate__main {
  font-size: 1.0625rem;
}

.tractate__title {
  margin: 0 0 .9rem;
  font-size: 2.2rem;
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  text-align: left;
  text-box: trim-start cap alphabetic;
}

.tractate__lede {
  margin: 0 0 1.2rem;
  font-size: 1.32rem;
  line-height: 1.62;
}

.tractate__body {
  margin: 0 0 1.2rem;
  font-size: 1.06rem;
  line-height: 1.78;
}

/* --- section labels, shared by all three columns ------------------ */

.tractate__main .label {
  margin: 2.2rem 0 .8rem;
  font-size: .72rem;
}

.tractate__projects .label,
.tractate__work .label {
  margin: 0 0 .7rem;
  font-size: .68rem;
  letter-spacing: .2em;
}

/* --- the numbered work list --------------------------------------- */

.works {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.works__item {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  padding: .9rem 0;
}

.works__number {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: .8rem;
  color: var(--text);
  padding-top: .28em;
}

.works__title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.02rem;
}

.works__caption {
  display: block;
  font-size: .95rem;
}

/* --- the margin columns -------------------------------------------- */

.tractate__margin {
  font-size: .9375rem;
  line-height: 1.68;
}

.tractate__margin-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}

.tractate__margin-list strong {
  font-family: var(--font-slab);
  color: var(--text);
}