/*
 * The letters — /lettres, the archive (each letter a ruled entry, its number
 * in the margin), and /lettres/:slug, one letter set like the home page
 * (letter.css) with the editor's markdown body: five picks on ruled lines,
 * numbered in gules in the margin, as on the home page's « Cette semaine ».
 */

/* ==========================================
 * ONE LETTER
 * ========================================== */

/* The objet is the page's h1, but reads as on the home letter. */
.letter-page .letter-subject {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
}

.letter-page .letter-salutation {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
}

.letter-text > p:last-child {
  margin-top: var(--space-6);
}

.letter-text a {
  text-decoration-color: var(--line-strong);
}
.letter-text a:hover {
  text-decoration-color: var(--accent);
}

.letter-text ol {
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
}

.letter-text ol > li {
  position: relative;
  padding-block: var(--space-5);
  border-bottom: var(--border-width-1) solid var(--line);
}
.letter-text ol > li:first-child {
  border-top: var(--border-width-1) solid var(--line);
}

/* list-item is the list's own counter, so an `<ol start>` keeps its numbering. */
.letter-text ol > li::before {
  content: counter(list-item);
  position: absolute;
  top: var(--space-5);
  right: calc(100% + var(--cj-column-gap));
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--cj-display-sm);
  line-height: 1.1;
  color: var(--accent);
}

.letter-text li > p {
  text-indent: 0;
}
.letter-text li > p + p {
  margin-top: var(--space-2);
}

/* A pick's first line: the event's title, then its date and place in small type. */
.letter-text ol > li > p:first-child strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  font-size: var(--cj-entry-title);
  line-height: var(--line-height-snug);
}
.letter-text ol > li > p:first-child em {
  display: inline-block;
  margin-top: var(--space-1);
  font-style: normal;
  font-size: var(--cj-small);
  line-height: var(--line-height-normal);
  color: var(--ink-muted);
}

.letter-text ul {
  margin: 1em 0;
  padding-left: 1.25em;
}
.letter-text ul > li + li { margin-top: 0.4em; }

.letter-text h2,
.letter-text h3 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  font-style: italic;
}
.letter-text h2 { font-size: var(--font-size-2xl); }
.letter-text h3 { font-size: var(--font-size-xl); }

.letter-text blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: var(--border-width-2) solid var(--accent);
  font-style: italic;
}
.letter-text blockquote p { text-indent: 0; }

.letter-text hr {
  margin: var(--space-10) auto;
  width: 30%;
  border: 0;
  border-top: var(--border-width-1) solid var(--line-strong);
}

.letter-nav {
  grid-column: margin-start / text-end;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-5);
  border-top: var(--border-width-1) solid var(--line);
  font-size: var(--cj-small);
}

.letter-nav-link {
  color: var(--ink-secondary);
  text-decoration-color: transparent;
  white-space: nowrap;
}
.letter-nav-link:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.letter-nav-all { font-style: italic; }
.letter-nav-next { margin-left: auto; }

@media (max-width: 47.99em) {
  .letter-text ol > li { padding-left: var(--space-10); }
  .letter-text ol > li::before {
    right: auto;
    left: 0;
    top: var(--space-4);
    font-size: var(--font-size-2xl);
  }
  .letter-nav { margin-top: var(--space-12); }
}

/* ==========================================
 * THE ARCHIVE
 * ========================================== */

.letters {
  padding-top: var(--space-12);
}

.letters-kicker {
  grid-column: margin;
  grid-row: 1;
  justify-self: end;
  align-self: baseline;
  font-size: var(--cj-small);
  font-style: italic;
  color: var(--ink-muted);
}

.letters-title {
  grid-column: text-start / full-end;
  grid-row: 1;
  align-self: baseline;
  font-size: var(--cj-title);
  font-style: italic;
  margin-left: -0.03em;
}

.letters-dek {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  font-style: italic;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* English edition: the one line saying the letters are French. */
.letters-in-french {
  margin-top: var(--space-2);
  font-size: var(--cj-small);
  color: var(--ink-muted);
}

.letters-list {
  grid-column: margin-start / text-end;
  display: grid;
  grid-template-columns: subgrid;
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

.letters-item {
  grid-column: margin-start / text-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--line);
}
.letters-item:first-child {
  border-top: var(--border-width-1) solid var(--line);
}

.letters-number {
  grid-column: margin;
  justify-self: end;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--cj-display-sm);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.letters-number-label {
  font-size: 0.6em;
}

.letters-entry {
  grid-column: text;
}

.letters-entry-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  text-decoration-color: var(--line-strong);
  text-wrap: pretty;
}
.letters-entry-title:hover { text-decoration-color: var(--accent); }

.letters-entry-date {
  margin-top: var(--space-2);
  font-size: var(--cj-small);
  color: var(--ink-muted);
}

.letters-entry-opening {
  margin-top: var(--space-3);
  font-style: italic;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.letters-empty {
  margin-top: var(--space-12);
  font-style: italic;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

@media (max-width: 47.99em) {
  .letters { padding-top: var(--space-8); }
  .letters-kicker,
  .letters-title { grid-row: auto; }
  .letters-kicker { justify-self: start; }
  .letters-title { grid-column: text; }
  .letters-dek { font-size: var(--cj-body-size); }
  .letters-list { margin-top: var(--space-8); }

  .letters-item {
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    column-gap: var(--space-3);
  }
  .letters-number {
    grid-column: 1;
    justify-self: start;
    font-size: var(--font-size-xl);
  }
  .letters-entry { grid-column: 2; }
  .letters-entry-title { font-size: var(--font-size-xl); }
}