/* The letter. Measures read from the annual letter published at
   letters-to-friends.vercel.app/idea-4.

   Three columns share the width — index, text, empty margin — with the text in the
   middle. The index sticks while the page scrolls. Headings are Portrait, left, at
   the width of the column.

   The marmol paper, the white mat and the band are in `base.css`: both pages share them. */

.doc {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--letter-max);
  margin: 0 auto;
  padding: var(--page-pad-y) var(--letter-pad-x);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: var(--letter-text);
  line-height: var(--letter-leading);
}

/* The index rises above the document's own padding so it sits as far from the top as
   from the left — 40 from the mat either way — and past 1440 it follows the edge
   instead of the column. What the window has over 1440 is measured inside the mat,
   not against the whole window, or the two margins stop matching. */
.rail {
  position: sticky;
  top: calc(var(--mat) + 40px);
  margin-top: calc(var(--mat) + 40px - var(--page-pad-y));
  transform: translateX(calc(-1 * max(0px, (100vw - 2 * var(--mat) - var(--letter-max)) / 2)));
  flex: 1 0 0;
  min-width: 0;
  max-width: var(--letter-side);
  font-size: var(--small);
  line-height: var(--small-leading);
}

.rail__home {
  display: inline-block;
  margin-bottom: 24px;
}

.rail__home:hover .mark__block { fill: var(--ember); }

/* Each row is a number in Courier Prime and a title in Manrope SemiBold, with the
   title set 4 lower so the number rides above it. The number is nuvola until the row
   is the one being read or under the pointer. */

.rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.rail__list li {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 240ms ease, opacity 240ms ease, margin-top 240ms ease;
}

.rail__list li + li { margin-top: 8px; }
.rail__list li > .rail__item { overflow: hidden; min-height: 0; }

.rail__item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-decoration: none;
}

.rail__num {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--nuvola);
  transition: color 180ms ease;
}

.rail__info {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.rail__name {
  font-weight: 600;
  color: var(--grafite);
}

.rail__item.is-current .rail__num,
.rail__item:hover .rail__num,
.rail__item:focus-visible .rail__num { color: var(--grafite); }

/* Both of these belong to the index standing beside the letter. Where it is a row
   above the text it is always there, whole: hiding it would only leave a hole.

   Waiting: over the masthead and the cover there is no section yet, so the index comes
   in where the first one starts. In the annual letter the whole rail fades; here only
   the list does, because the block above it is the way back.

   Folded: only the row being read shows, until the pointer or the keyboard comes to
   the index and the rest unfold around it. Folded, the row being read always stands
   where the first one does and a new one takes its place at once: no room over it,
   and no sliding while the one before folds away. */
@media (min-width: 1024px) {
  .rail__list { transition: opacity 0.5s ease; }

  .rail.is-before .rail__list {
    opacity: 0;
    pointer-events: none;
  }

  .rail:not(:hover):not(:focus-within) li:not(:has(.is-current)) {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
  }

  .rail:not(:hover):not(:focus-within) li {
    margin-top: 0;
    transition: none;
  }
}

/* The margin is empty and as wide as the index: it is what holds the column in the
   middle. In the annual letter the partners' notes go here. */
.margin {
  flex: 1 0 0;
  min-width: 0;
  max-width: var(--letter-side);
  align-self: stretch;
}

/* 56 between the blocks that open the letter, and the full 160 between one section and
   the next, so it reads where one ends and the other starts. */
.letter-column {
  flex: 1 0 0;
  min-width: 0;
  max-width: var(--letter-measure);
  display: flex;
  flex-direction: column;
}

/* Written through `.doc` so these win over the `margin: 0` that the figures carry:
   without it the cover ends up stuck to the masthead. */
.doc .letter-column > * + * { margin-top: 56px; }

/* One section to the next is the longest break the letter makes. */
.doc .letter-column > .section + .section { margin-top: var(--gap-xxxl); }

.masthead { display: flex; flex-direction: column; gap: 4px; }

.masthead__title {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.masthead__sub {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  color: var(--ardesia-dark);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  scroll-margin-top: calc(var(--mat) + 40px);
}

.heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--heading);
  line-height: var(--heading-leading);
  letter-spacing: -0.02em;
  color: var(--grafite);
}

.section p { margin: 0; }

/* A figure wants more air than a paragraph break gives it: the annual letter sets its
   images 80 from the text either side, where paragraphs sit 24 apart. The margin only
   has to make up what the section's own gap does not already cover. */
.section > .figure { margin: calc(var(--figure-gap) - var(--section-gap)) 0; }

/* Where the figure closes a section, the break to the next one carries the distance. */
.section > .figure:last-child { margin-bottom: 0; }

/* The quote is set apart the way the annual letter sets a passage apart: between two
   short rules, centred, and over a narrower measure than the column. */
.pullquote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  margin: 56px 0;
}

.pullquote__rule {
  display: block;
  width: 40px;
  height: 2px;
}

.pullquote__text {
  max-width: var(--pullquote-measure);
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--heading);
  line-height: var(--heading-leading);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--grafite);
}

.figure { margin: 0; }

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* The cover is as tall as the annual letter's masthead image. */
.figure--cover img {
  width: auto;
  height: var(--cover-height);
}

/* Below 1024 the three columns do not fit: the index becomes a row above the text. */
@media (max-width: 1023px) {
  /* The 32 at the top is what leaves the block as far inside the mat as the sides
     leave it. The foot is another matter: 32 between the end of the letter and the
     band reads as no break at all, where the desktop page has 120 for the same gap. */
  .doc {
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--mat) * 2) var(--mat) var(--letter-foot);
    gap: 40px;
  }

  .rail {
    position: static;
    margin-top: 0;
    transform: none;
    max-width: none;
  }

  /* Beside a column that is already the whole page there is no room for an index:
     the block stays as the way back and the list goes. */
  .rail__list { display: none; }

  .rail__home { margin-bottom: 0; }

  .letter-column { max-width: none; }

  .margin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__num, .rail__name { transition-duration: 1ms; }
}